swiper

swiper copied to clipboard

Clear and concise description of the problem

Hello,

I apologize if this is already a feature, though I do not see it in any demos.

I would love to recommend adding a built-in option for continuous autoplay, whereby the swiper moves like a marquee instead of automatically transitioning each slide.

Here is an example use case, but there's many other uses cases like logo marquees, for example: https://cloud.coderesolution.com/OEdvhm

If it is fairly easy with custom coding, I'd love some assistance, if that's possible?

Suggested solution

I did some competitor analysis checks and found that some other popular slider libraries do have this functionality, for example:

Flickity: https://codepen.io/cmalven/pen/vqbJPM Splide: https://splidejs.com/extensions/auto-scroll Owl Carousel: https://codepen.io/mdrezwanferdous/pen/wpNZxN

Alternative

If it requires custom development, an example/demo of this would be amazing!

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Link to my test: https://codesandbox.io/s/swiper-autoplay-forked-lce07y?file=/index.html

I would love to see this, it would be really useful. At the moment using a workaround the speed is changing depending on the width which breaks the marquee effect when you have logos with different widths.

Just in case anyone comes across this (as I did), add this to your CSS:

.swiper-wrapper {
    transition-timing-function: linear;
}

And set something like the below on your swiper initiation:

autoplay: {
    delay: 1,
    disableOnInteraction: false,
}

Enjoy a marquee effect!

@tex0gen this does do the job, thank you. It's what I ended up leaning towards, though I am noticing a couple of glitchy things going on if the slides are clickable. Luckily in this case, they aren't so pointer-events: none was a fine compromise.

I'd be thrilled to see a native option implemented into SwiperJS though, I personally and our team would use it frequently.

Swiper v9 comes with fully reworked autoplay module. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.