How to implement a continuous, infinite autoplay slider

[andyfangaf]

AFAIK there is no option for a continuous autoplay slider that moves without momentum and does not stop at any point (it's infinite, or looping). Is there a hack that makes this possible?

[aarcoraci]

You can in fact achieve this with some CSS magic. I found the following codepen:
https://codepen.io/udovichenko/pen/xpwvjB

Look at the css rule:

.swiper-container-free-mode > .swiper-wrapper{
  transition-timing-function : linear;
}

I tried on my project and it worked

[PubliAlex]

@heretoshleigh use another library like keen slider, swiper is not able to handle continous autoplay yet.

[Nerdy-Mike]

hi @aarcoraci, is there any way to slow down the linear autoplay animation? thanks in advance

[Nerdy-Mike]

oh never mind, I found it :D https://stackoverflow.com/questions/43801782/swiper-continous-loop-without-pause-between-sliding

[lcandy2]

for anyone use the latest version (v11 for now), use the updated code below:

.swiper-free-mode > .swiper-wrapper{
  transition-timing-function : linear !important;
}

[OleksiiByteex]

v11 - ShadowDOM issue - Vue3 workaround:

 `mounted() {
    this.$nextTick(() => {
      const swiperEl = this.$refs.filterSlider;
      const shadowRoot = swiperEl.shadowRoot;
      const swiperWrapper = shadowRoot.querySelector('.swiper-wrapper');
      swiperWrapper.style.transitionTimingFunction = 'linear';
    });
 },`

[landsman]

This does not have the official solution yet?

[PubliAlex]

If all you slide have the same width, there are solutions above. If slide width is variable, no solution yet.

[ooksanen]

I'm just implementing this on a site and it seems to work fine even with variable width slides. I have it set up like this:

new Swiper (el, {
	autoplay: {
		enabled: true,
		delay: 0,
		pauseOnMouseEnter: false,
		disableOnInteraction: true,
	},
	centeredSlides: true,
	loop: true,
	navigation: false,
	noSwipingClass: 'swiper-slide',
	slidesPerView: 'auto',
	spaceBetween: 15,
	speed: 12000,
});

Only downside so far is that pauseOnMouseEnter doesn't work properly as it waits for the whole animation (in my case 12 seconds) to end before stopping and restarting the animation. It might be possible to stop the animation like on this pen, but I haven't tried it yet.

[PubliAlex]

By seeing your code, you sould have variable speed transition between your slide, but it's probably don't noticable because your speed is very high and your slide width are probably not so different.

[ooksanen]

Ah, you're correct. Although the slide widths vary about 50% between widest and narrowest the speed variance isn't really noticable in my case. With one significantly wider slide the problem is clearly visible.

[oppenheims]

can be achieved by css. example: https://codepen.io/studiojvla/pen/qVbQqW
this way can pause by set 'animation-play-state', don't need wait

[PubliAlex]

Again, it only works if slides have the same width. With different slide size, you will have a speed change problem