Streaming live at 10am (PST)

Help with simple brands carousel

Hi guys, my first post here in the forum.

I am having trouble creating a simple infinite carousel to showcase the brands that my client works with.

I can’t eliminate whitespace and create an infinite loop.

Can someone help me?

Link to the project:

https://preview.webflow.com/preview/testecarousel?utm_medium=preview_link&utm_source=dashboard&utm_content=testecarousel&preview=6cbe0ff7e200ecbe80e745e1e905ea7d&mode=preview


Paulo Cardoso

@estudiodas Welcome :slight_smile:

Try setting the Mask 2 overflow to hidden:

That produces this result:

Which needs a bit of styling work still, but cycles through the logos as intended.

My intent is to show five brands at once. If I change overflow of “Mask 2” to hidden it only shows one. :frowning:

So in that case have 5 brands per slide, rather than a slide for each logo. You can set your slide to display flex, horizontal, no wrap, justify space between and then insert five logos on each slide, they should space evenly across the row. Then duplicate that slide.

image

Unfortunately, if I put 5 brands on a single slide, I will not get the desired effect (one step at a time) and it will not work properly mobile, where the number of brands will be less.

That’s what I’m trying to accomplish:
https://codepen.io/mdashikar/pen/VWPvgE

Got it, thanks for the additional explanation.

I think you have two options:

  1. See this demo created by @sabanna using some interactions in conjunction with the built-in slider: http://sapdesign-sandbox.webflow.io/custom-slider (forum post: Help! How do i recreate this carousel slider and navigation effect?)

  2. Use custom code, something like slick would be able to do this pretty easily: http://kenwheeler.github.io/slick/

Great!
I already used slick in other project. So I think I’ll go with that.

Thanks for the help and patience, Sam-g

1 Like