javascript - Why in the infinite loop the sliders in swiper js jump when the loop ends - Stack Overflow

admin管理员组

文章数量:1297237

I have to design a slider exactly like this. Like this unsplash or this piotnetgrid.

I could not solve the following issue with swiper: I want to use the loop in this slider. In this slider, I have put 20 photo slides. When autoplay reaches image 19 and 20 and enters the loop to restart, this is done by jumping.

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="@8/swiper-bundle.min.css"
/>
<script src="@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('') !important">Slide 1</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 2</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 3</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 4</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 5</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 6</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 7</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 8</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 9</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 10</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 11</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 12</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 13</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 14</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 15</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 16</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 17</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 18</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 19</div>
      <div class="swiper-slide grids" style="background-image: url('') !important">Slide 20</div>
      
 </div>
</div>

I have to design a slider exactly like this. Like this unsplash.com or this piotnetgrid.com.

I could not solve the following issue with swiper: I want to use the loop in this slider. In this slider, I have put 20 photo slides. When autoplay reaches image 19 and 20 and enters the loop to restart, this is done by jumping.

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>

• javascript
• html
• jquery
• css
• swiper.js

Share Improve this question Follow edited May 29, 2022 at 14:24 h.m.p.frontendDeveloper asked May 29, 2022 at 14:09 h.m.p.frontendDeveloperh.m.p.frontendDeveloper 50511 gold badge66 silver badges1414 bronze badges

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 13

I also had a similar issue, in version 9 amount of slides in loop mode should be at least 2x of slidesPerView value. Thought this may help anyone having the same issue. See Documentatoion

Loop mode has been fully reworked in version 9 and now instead of duplicating slides, it rearrange current ones dynamically.

It comes with new limitation. Amount of slides in loop mode should be at least 2x of slidesPerView value.

loopedSlides with new logic works in a bit different way, and you probably should remove it or make sure it is less or equal to slidesPerView.

Example:

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>
)

I have the same issue with the latest version of swiper.js. All the working solutions i’ve found on the internet using a older version of swiper.js. So maybe its a bug in a newer version of swiper, because there were already similar bugs in older versions. https://github.com/nolimits4web/swiper/issues?q=loop+jump

The jump occurs, when swiper js is in a loop mode. It creates duplicate slides after the last and the first slide, if you want to go backwards. I will give you an example:

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;
    }
}

Works if centeredSlides: true ))) Bugs of Swiper )

This Combination Worked with me :

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

add it to swiper configuration

Had the same issue, I was able to fix it with loopedSlides property. When I say how many slides is in the loop it started to work without a jump.

Working solution for Swiper 11

I see a lot of comments that suggest to downgrade, but I think in the new version they just simply renamed it to loopAdditionalSlides I tried that one in stead of loopedSlides and I got it working again using Swiper 11.0.3

本文标签： javascriptWhy in the infinite loop the sliders in swiper js jump when the loop endsStack Overflow