我尝试在滑动手指时使2行同时移动,即使在辅助幻灯片上滑动手指也能正常工作,如果我尝试仅在主幻灯片上滑动手指,也能正常工作。我尝试了我知道的一些资源,但仍然不起作用,如果有人能帮助我,我会很高兴的
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<div class="carousel">
<div class="swiper-container main-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product">
<!-- conteúdo do produto -->
1
</div>
</div>
<div class="swiper-slide">
<div class="product">
2
</div>
</div>
<div class="swiper-slide">
<div class="product">
3
</div>
</div>
</div>
<div class="swiper-container secondary-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product">
4
</div>
</div>
<div class="swiper-slide">
<div class="product">
5
</div>
</div>
<div class="swiper-slide">
<div class="product">
6
</div>
</div>
<!-- Adicione mais slides aqui -->
</div>
</div>
<style>
.swiper-wrapper {
height: 230px; /* defina a altura do slide aqui */
}
.carousel-row {
display: flex;
width: 120%;
height: 240 /*altura entre os produtos*/
}
.carousel {
position: relative;
width: auto;
scroll-snap-type: x mandatory;
}
.carousel-wrapper {
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none; /* para Internet Explorer e Edge */
scrollbar-width: none; /* para Firefox */
-webkit-scrollbar: none; /* para Chrome, Safari e Opera */
}
.carousel-wrapper::-webkit-scrollbar {
display: none;
}
.carousel-slide {
flex: 0 20 100%;
height: 320px;
scroll-snap-align: center;
text-align: center;
font-size: 24px;
background-color: #ffffff;
margin: 0px
}
.carousel-indicators {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: none;
}
.carousel-indicator {
width: 6;
height: 6;
margin: 20 1px;
border-radius: 10%;
border: none;
background-color: #ccc6;
}
.carousel-indicator.active {
background-color: #aaa;
}
.carousel-pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1px;
}
.carousel-pagination button {
border: none;
background-color: transparent;
width: auto;
height: auto;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.carousel-pagination button.active {
background-color: #333;
}
.product {
width: calc(25% - 5px);
margin: 50 50px50px 5;
flex: 0 0 300px;
margin-top: 20px;
display: inline-block;
margin-right: 5px;/*define o espaçamento entre os produtos*/
justify-content: space-between;
align-items: center;
width: 220px; /*define a largura da filha box*/
height: 195px; /*define a altura da filha box*/
padding: 10px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.rating-heart {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.rating {
font-size: 20px;
color: #FAB517;
margin-bottom: 1px;
}
.qtd {
margin-right: 180px; /*ajusta o gap entre os elementos right,left,top,bottom*/
font-size: 15px;
color: #6E6F71;
font-family: sans-serif;
padding-left: 0px;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;/*define a largura do conteúdo das caixas*/
height: 130; /*define a altura do conteúdo das caixas*/
margin-bottom: -10px;
}
img {
max-width: 100%;
max-height: 110px;
object-fit: contain;
margin-bottom: 20px;
}
.description {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
gap: 5px; /* gap entre preço e descrição */
margin-bottom: 70px;
position: relative;
}
.description, .description h2, .description p, .price {
padding-left: 5px;
}
.description h2 {
font-family: sans-serif;
color: #373B4D;
text-align: left;
font-size: 11px;
font-weight: bold;
height: 65px;
padding-top: 15px;
margin-top: 20px;
margin-bottom:-1
}
.description p {
font-family: sans-serif;
color: #373B4D;
font-size: 10px;
margin-bottom: 3px;
margin-top: 3px;
left:10
position: fixed;
}
.price {
font-family: sans-serif;
color: #7339C9;
font-size: 18px;
font-weight: bolder;
margin-bottom: 1px;
position: absolute;
top: 120;
}
.carrinho {
text-decoration: none;
width: 15px;
height: 15px;
background-image: url('https://uploaddeimagens.com.br/images/004/354/391/original/carrinho-de-compras_%281%29.png?1676444933');
background-repeat: no-repeat;
background-size: contain;
margin-right: 10px;
margin-bottom: 2px;
gap: 10px; /* adição da propriedade gap com valor 5px */
}
.buy-button {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
font-family: sans-serif;
background-color: #7339C9;
color: white;
font-size: 13px;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
.buy-button:hover {
text-decoration: none;
background-color: #7B1FA2;
}
.buy-button i {
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
margin-right: 15px;/*distância entre icone e "comprar"*/
}
</style>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var mainSwiper = new Swiper('.main-slider', {
loop: true,
slidesPerView: 'auto',
spaceBetween: 250,
navigation: {
nextEl: '.main-slider .swiper-button-next',
prevEl: '.main-slider .swiper-button-prev',
},
controller: {
control: secondarySwiper,
by: 'container'
}
});
var secondarySwiper = new Swiper('.secondary-slider', {
loop: true,
slidesPerView: 'auto',
spaceBetween: 250,
navigation: {
nextEl: '.secondary-slider .swiper-button-next',
prevEl: '.secondary-slider .swiper-button-prev',
},
controller: {
control: mainSwiper,
by: 'container'
}
});
mainSwiper.init();
secondarySwiper.init();
</script>
1条答案
按热度按时间jm81lzqq1#
要使手指在主转盘上滑动时两个转盘同时移动,需要将touchEventsTarget选项添加到mainSwiper示例并将其设置为.“secondary-slider”。这将在手指在主转盘上滑动时启用辅助转盘上的触摸事件,两个转盘将一起移动。
下面是一个基于您的代码的示例: