Continuous smooth scrolling with SwiperJS

[fatihturan]

Hi,

Is there any way to make scrolling behavior to continuous smooth scrolling like below example with SwiperJS?

Screen.Recording.2022-08-31.at.15.00.25.mov

Thanks!

[sparshsharma2510]

I know it's late but nevertheless, instead of using swiper component, I will suggest you go for something like Marquee (using CSS).
Try to understand how Marquee actually works (it's beginner friendly) and I think you will achieve this functionality very easily.

[christianarenz]

@fatihturan I think the following config should do this:

freeMode: true,
loop: true,
allowTouchMove: false,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
slidesPerView: 5.5,
spaceBetween: 32,
speed: 10000

[heretoshleigh]

This only works if the slides are of equal width. 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!

[stawjannik]

@heretoshleigh same problem here. If anybody got a solution, pls hit me up :D

[PubliAlex]

I don't think swiper is able to correctly handle marquee, looking for another library, if someonw know a good one, I'm interested

[heretoshleigh]

@stawjannik Sorry for the delayed response, but I never found a solution. To the best of my knowledge, it's not currently possible to achieve a linear speed with variable width slides. I ended up just renegotiating the design to allow for a brief pause between slides because I was using swiper for other carousels on the page and didn't want to load a second library. In general, I have found swiper to be more challenging to implement when widths/heights are variable.

[stawjannik]

@PubliAlex @heretoshleigh hey guys, thanks for reaching me out with your input. Its unlucky, tbh I would never use swiper for a marquee, maybe if width and heights would be static. But in this case I had to, because of the bootstrap theme "Front" which the customer wants to use....

Anyways, thanks for your help! <3