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.

[decipher-cs]

Marquee tag has been depricated. Better stick with swiper or write the CSS for it yourself.

Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

[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

[ghost]

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

[ghost]

@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

[PubliAlex]

@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

Difference between a carousel and a markee is very light and I wouldn't load a full new library to handle this whereas I have swiper that handle 90% of the problem.

[Tarasulko]

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!

Did You find solution?

[decipher-cs]

Did you try the solution by christianarenz?

#6018 (comment)

[simonfrost]

In addition to christianarenz solution above, set the transition easing on .swiper-wrapper to linear.

transition-timing-function: linear;

[arbitrarily]

<3

[aygunbarkhudarova]

:root {
--swiper-wrapper-transition-timing-function: linear !important;
}

[sohi2005]

i found the solution 👍
why it's happening ?:it's happening just for the transition ease in you just need to do it linear to swiper-wrapper class , if you are just adding swiper js just for Marquee then add to swiper css file this : :root {
--swiper-wrapper-transition-timing-function: linear !important;
}

or if you using cdn then inline style in swiper-wrapper
or if you using tailwind just add ease-linear ,
must off freemode ;
thanks me latter

[capynet]

I got a functional smooth carousel inpired by previous comments https://codepen.io/capynet/pen/NPKdpWO

chrome_9phNxGfb6L.mp4

[fatihturan]

This is great! Thanks for sharing @capynet! 👏🏻