为什么在无限循环中，swiper js中的滑块在循环结束时会跳转

Question

我必须设计一个像这样的滑块。就像这个unsplash.com或这个piotnetgrid.com。

我无法使用 swiper 解决以下问题：我想使用此滑块中的循环。在这个幻灯片中，我放置了 20 张照片幻灯片。当自动播放到达图19和图20并进入循环重新开始时，这是通过跳跃来完成的。

var swiper = new Swiper(".masonrySwiper", {
    direction:"horizontal",
    loop: true,
    slidesPerView: 8,
    simulateTouch:false,

    autoplay: {
      enabled: true,
      delay: 1,          
      pauseOnMouseEnter: true,
      disableOnInteraction: false,
    },
    centerInsufficientSlides:true,
    speed: 700,               
});

.swiper-wrapper{
   box-sizing: border-box !important;
   display: flex !important;
   flex-flow: column wrap !important;
   height: 80vh !important;
   text-align: center !important;
   text-transform: uppercase !important;
   width: 100% !important;
   left: 0;
   transition-timing-function: linear !important;
} 

.grids {
    align-items: center !important;
    background: white !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
    color: white !important;
    display: flex !important;
    flex-grow: 0 !important;
    font-family: sans-serif !important;
    font-size: 20px !important;
    height: 50% !important;
    justify-content: center !important;
    max-width: 100% !important;
    border: 3px solid white;
}
  
.grids:nth-child(6n-5) {
    height: 30% !important;
    width: 25% !important;
}

.grids:nth-child(6n-4) {
    height: 70% !important;
    width: 25% !important;
}

.grids:nth-child(6n-3) {
    height: 50% !important;
    width: 30% !important;
}

.grids:nth-child(6n-2) {
    height: 50% !important;
    width: 30% !important;
}
  
.grids:nth-child(6n-1) {
    height: 60% !important;
    width: 40% !important;
}

.grids:nth-child(6n) {
    height:40% !important;
    width: 40% !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>


<div class="swiper masonrySwiper" style="border: 3px solid red; width: 100%;">
    <div class="swiper-wrapper" style="border: 3px solid green; width: 100%;">
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/1') !important">Slide 1</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/2') !important">Slide 2</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/3') !important">Slide 3</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/4') !important">Slide 4</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/5') !important">Slide 5</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/6') !important">Slide 6</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/7') !important">Slide 7</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/8') !important">Slide 8</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/9') !important">Slide 9</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/10') !important">Slide 10</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/11') !important">Slide 11</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/12') !important">Slide 12</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/13') !important">Slide 13</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/14') !important">Slide 14</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/15') !important">Slide 15</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/16') !important">Slide 16</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/17') !important">Slide 17</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/18') !important">Slide 18</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/19') !important">Slide 19</div>
      <div class="swiper-slide grids" style="background-image: url('https://source.unsplash.com/random/20') !important">Slide 20</div>
      
 </div>
</div>

Answer 1

我也遇到了类似的问题，在版本 9 中，循环模式下的幻灯片数量应至少是 slipsPerView 值的 2 倍。我认为这可以帮助任何遇到同样问题的人。 请参阅文档

循环模式在版本 9 中得到了全面重新设计，现在不再重复幻灯片，而是动态重新排列当前幻灯片。

它带有新的限制。循环模式下的幻灯片数量应至少是slidesPerView值的2 倍。

具有新逻辑的loopedSlides 的工作方式有点不同，您可能应该删除它或确保它小于或等于slidesPerView。

例子：

const slides = [
    <img src='/image1' key={1}/>,
    <img src='/image2' key={2}/>,
    <img src='/image3' key={3}/>,
    <img src='/image4' key={4}/>,
    <img src='/image5' key={5}/>,
    <img src='/image6' key={6}/>,
]
return (
    <Swiper
        effect='slide'
        slidesPerView={3} 
        //since the slides array length is 6,
        //slidesPerView should be less than or equal to 3
        loop={true}
        autoplay={{
            "delay": 1,
            "disableOnInteraction": false,
            "pauseOnMouseEnter": false,
            "stopOnLastSlide": false,
            "waitForTransition": true
        }}
        modules={[Autoplay]}
    >
    {slides.map((item) => <SwiperSlide>{item}</SwiperSlide>)}
    </Swiper>
)

Answer 2

我对最新版本的 swiper.js 也有同样的问题。\ni\xe2\x80\x99 在互联网上找到的所有工作解决方案都使用旧版本的 swiper.js。所以也许它是新版本 swiper 中的一个错误，因为旧版本中已经存在类似的错误。https://github.com/nolimits4web/swiper/issues?q=loop+jump

\n