Ошибка SwiperJS Thumbs
Создал свайп большими пальцами. Когда я нажимаю на большие пальцы, то с непонятной логикой прокручивается вправо. Не могу понять, с чем это может быть связано, второй день пытаюсь решить эту проблему, ничего не выходит. Можно ли как-то отключить эту опцию, чтобы можно было убрать эту прокрутку при нажатии?
const productThumbs = new Swiper(".swiper-thumbs", {
spaceBetween: 30,
loop: true,
slidesPerView: 6,
loopedSlides: 7,
});
const productCarousel = new Swiper(".swiper-content", {
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
thumbs: {
swiper: productThumbs,
}
});
.swiper-slide{
background: gray;
}
.swiper-thumbs .swiper-slide{
height: 300px;
}
.swiper-content{
margin-top: 30px;
}
.swiper-thumbs .swiper-slide{
display: flex;
flex-direction: column;
}
.swiper-content .swiper-slide{
height: 250px;
background: black;
color: white;
font-size: 72px;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="slider-title">01</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">02</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">03</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">04</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">05</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">06</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper-content">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
Я пытался это сделать, но просто не понимаю, почему это происходит
0 ответов
В ползунке "thumbs" вам нужно изменить значение "loop" на "false" или убрать клавишу "loop" из ползунка "thumbs".