Ошибка 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".

Другие вопросы по тегам