swiper.js - SwiperJS 拇指错误

问题描述

用拇指创建了一个滑动。当我单击拇指时，它会以难以理解的逻辑向右滚动。我不明白这可能与什么有关，我试图解决这个问题第二天，没有任何结果。是否可以以某种方式禁用此选项，以便您可以在单击时删除此滚动条？

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>

我试图这样做，但我只是不明白为什么会这样

标签： swiper.js

swiper.js - SwiperJS 拇指错误

问题描述

解决方案

推荐阅读