Streaming live at 10am (PST)

Horizontal carousel that moves one card at a time?


#1

I’m trying to build a horizontal slider carousel that only moves one card over when you click on the direction arrow, rather than moving the entire row over. I know this might not be doable with the slider element but is this achievable some other way on Webflow?

Thanks!
Alex


#2

If I understand correctly, this can be done with the slider. inspect how it’s made. There’s a MASK element which is masking what’s outside the current slide. You can make thinner slides and control the MASK and have several cards on screen at the same time, and a click on an arrow will just center the next one.

Look the little “fancy image slider” on this page http://sab.webflow.io/interactive-elements


#3

@vincent Looks like I got it to work but I have it at full-width so it shows a big empty space to the left of slide 1. Am I doing something wrong or is that expected?


#4

No, that’s the one point I haven’t solved with this, the default state isn’t a clean loop of slides but shows space before the first one.


#5

Maybe just starting it on a later slide? It will still show empty space when you get to the first but do you know how I can start it at a later slide?


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.