SwiperJS Thumbs bug

问题描述

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

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>

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

解决方法

在“拇指”滑块中，您需要将值“ loop”更改为“ false”，或从“拇指”滑块中删除键“ loop”。