How to implement a continuous, infinite autoplay slider

[fandy]

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]

It works if all your slides have the same width, if you have variable slider width, the speed between slide will change, so it's not a true continous infinite autoplay

[heretoshleigh]

Yes, I am trying to implement this with variable widths, and I have not been able to find a solution. If anyone knows how to do it, please let me know!

[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

[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.