Why in the infinite loop the sliders in swiper js jump when the loop ends

Question

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>

Nolen

Answer 1

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

Idealism

While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. A code example can be very useful. Link-only responses may become invalid if the linked page changes. – Aranda

Thanks, I resolved the issue using V8, that's definitely a bad move from the devs for the case if numOfSlides < (2 * slidesPerView), there should be an option to keep the logic as it was before : duplicating slides. codepen.io/XavC/pen/BaGxJQV – Ratoon

Answer 2

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

Ironwood

Please try to add loopedSlides property. Maybe it will help you – Titrant

@ShulykVolodymyr thanks for the hint, i already tried this solution (since i found it on the internet), but still not working. – Ironwood

Downgrading to latest v8 fixed all my Swiper.js problems. – Sheela

Answer 3

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

Klemperer

Answer 4

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.

Titrant

Are you using the latest version of swiper? I couldn’t get it work with the loopedSlides property either. – Ironwood

My bad. I had a similar issue, but not the same. Experienced jump without loop: true, when manually switching slides, maybe that's why it's not working for your case. Answering your question, which is not relevant anymore, I guess - the latest swiperjs at the moment 8.3.2. – Titrant

Answer 5

This Combination Worked with me :

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

add it to swiper configuration

Horrify

Answer 6

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

Primatology

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Brandi

Answer 7

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

Dub

I could not understand what is the expected number to use based on the docs: swiperjs.com/swiper-api#param-loopAdditionalSlides. By any chance can help me understand? – Digestion