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

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

[gursuj]

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!

Apologies for replying to an old comment but I came across this after having issues with different width slides as well. I ended up using Splide instead, which has an autoWidth option. It's not updated anymore but works well enough. Doesn't pull in any dependencies as well if that's a concern. Example code to achieve a marquee with Splide:

  import Splide from "@splidejs/splide"
  import { AutoScroll } from "@splidejs/splide-extension-auto-scroll"
  import "@splidejs/splide/css/core"

  new Splide(".splide", {
    height: "clamp(50px, 9svh, 110px)",
    autoWidth: true,
    type: "loop",
    gap: "30px",
    pagination: false,
    arrows: false,
    breakpoints: {
      // for max 1023px i.e. till desktops
      1023: {
        height: "clamp(40px, 6svh, 80px)",
        gap: "20px",
      },
    },
  }).mount({ AutoScroll })

[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

[itsleonbro]

i've been looking for this the whole day. thank you so much

[AurelianSpodarec]

Is there really no settings for this? Why can no library be modular with its functionality

[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! 👏🏻

[willryanuk]

This is good, but it only works for fixed width slides. If the slides are variable width, then the slides will not all move at the same rate.

You could hook into the slide changed event, and update the speed for each slide, but its all a bit hacky. I think might be better to roll my own solution, or look for another library.

[kamrannazir901]

It might be help

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

[jessicalwilson]

Thanks to all in this thread, definitely helped me.