'Swiper continous loop without pause between sliding

I'm using this kind of configuration for swiper:

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  slidesPerView: 3,
  speed: 2500,
  centeredSlides: true,
  autoplay: 1000,
  autoplayDisableOnInteraction: false,
  loop: true
});

This works fine so far. But is it possible with the swiper not to stop between each 3 slides? Right now there is always a break until the next 3 slides slide in. I'm looking for an infinite continuous looping slider option. Is this possible?

Solution 1:^[1]

Yes it's possible, big up mariorendic

var swiperOptions = {
  loop: true,
  freeMode: true,
  spaceBetween: 0,
  grabCursor: true,
  slidesPerView: 7,
  loop: true,
  autoplay: {
    delay: 1,
    disableOnInteraction: true
  },
  freeMode: true,
  speed: 5000,
  freeModeMomentum: false
};

var swiper = new Swiper(".swiper-container", swiperOptions);

body {
  margin: 0;
  padding: 0;
  background: #eee;
  font-family: sans-serif;
  font-size: 14px;
  background: #404449;
  
}

.swiper-container {
  height: calc(100vh - 120px);
  margin: 60px;
}


.swiper-slide {
  width: 28vw;
  overflow: hidden;
  background-position: top;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/250/g);">1</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/260);">2</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/270);">3</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/270/y);">4</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/280/y);">5</div>
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/190/y);">6</div>
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/300/);">7</div>
  </div>
</div>

https://codepen.io/tristanisginger/pen/dypxRbv

Solution 2:^[2]

At present there is no configurable way to set autoplay: 0 because the conditional tests don't differentiate between a boolean value of false and a "falsy" value of 0.

See https://github.com/nolimits4web/Swiper/blob/21d2a1da5b9b2e9610ec4005aad337a4af4d729f/src/js/core.js#L590. (Also check line 621)

Solution 3:^[3]

I was facing a similar problem and the reason was that pages of my swiper keep adding new elements (widgets in my case) every time when build method was called. The fix was to clear all lists of pages or items before adding elements to make sure you get rid of any previous elements from the last build.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tristanisginger
Solution 2	atstormcup
Solution 3	Marian

'Swiper continous loop without pause between sliding

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]