Simple Trick for Infinite Marquee with Swiper.js

[@kevynlevine]

Raw dogging is my favorite way to do everything, in Webflow. Great video - thank you!

[@webbae]

sometimes you gotta be quick with it.

[@alyssa_bananas]

Definitely cloning this! I use SwiperJS all the time but just couldn't figure out how to do a smooth marquee! Thanks for this

[@webbae]

overriding the timing transition func was the key for me. I feel like swiper should expose that as an option in the JS API....

[@Wasgehtdichdasan16]

How would you make the gap even betweeen differen size logos?

[@webbae]

you could use slidesPerView not on auto for that. You could also get more fine-grained control by adding combo classes like "is-small" or "is-brand-x" and provide granular styles that way.

[@johanvanwambeke723]

What do you think are the advantages of doing it this way?

[@webbae]

extensibility - what if we wanted to speed up/down based on scroll? What if we wanted the user to be able to interact with the logo garden somehow? etc. Hope that helps!

[@Binyamin1444]

Great stuff but why wouldn’t we just use css only marquees? For better page speeds..

[@webbae]

Some folks have reported css marquees glitch when you have certain content in there. I’ve never had any major problems with them though.
Created a logo slider from swiped could also provide a lot of extensibility if you want something more interactive like change speed on scroll or something like that.

[@Binyamin1444]

@@webbaeah cool makes sense. Keep up the good work

[@heatherliu6856]

Developers don’t want you to know this one simple trick….

[@webbae]

But I got a whole bag of 'em...

[@surendarr2177]

🤩🤩🤩