Блог

Главная - Вопросы по программированию - Ошибка больших пальцев SwiperJS

Ошибка больших пальцев SwiperJS

#swiper.js

Вопрос:

Создал свайп большими пальцами. Когда я нажимаю на большие пальцы, он прокручивается вправо с непонятной логикой. Я не могу понять, с чем это может быть связано, я пытаюсь решить эту проблему уже второй день, ничего не выходит. Можно ли как-то отключить эту опцию, чтобы вы могли удалить этот свиток при нажатии?

 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>

Я пытался это сделать, но я просто не понимаю, почему это происходит

Ответ №1:

В ползунке «большие пальцы» вам нужно изменить значение «петля» на «ложь» или удалить клавишу «петля» из ползунка «большие пальцы».

Метки: