我必须设计一个和这个一模一样的滑块。像这个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>

4条答案

按热度按时间

bpsygsoo1#

我在使用最新版本的swiper.js时遇到了同样的问题。我在互联网上找到的所有有效解决方案都使用了较旧版本的swiper.js。因此，这可能是较新版本的swiper中的一个错误，因为在较旧版本中已经存在类似的错误。https://github.com/nolimits4web/swiper/issues?q=loop+jump

赞(0）回复(0）举报 2023-02-08

idv4meu82#

有同样的问题，我能够修复它与loopedSlides属性。当我说有多少幻灯片是在循环中，它开始工作，没有跳转。

4uqofj5v3#

当swiper js处于循环模式时，会发生跳转。如果你想后退，它会在最后一张和第一张幻灯片之后创建重复的幻灯片。我给予你一个例子：

swiper.on('transitionEnd', function () {
    let activeSlide = swiper.realIndex +1; // Index of Current active slide
    let previousSlide = swiper.previousIndex -2; // Index of previous active slide
    if (previousSlide == -1) { 
        previousSlide = 0;
    } else if (previousSlide == 
        document.querySelectorAll('.swiper-slide').length) { 
        // When swiper loops, slideChange 
        // gets fired twice and messes up animations. This 
        // prevents it from doing so.
      return;
    }
}

puruo6ea4#

这个组合对我很有效：

slideToClickedSlide: true,
  loop: true,
  loopFillGroupWithBlank: true,
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
    reverseDirection: true,
 }

添加到swiper配置

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

4条答案

相关问题

热门标签

最新问答