Streaming live at 10am (PST)

I want to have a circle slider


#1

I'm wanting to make my slider take on the shape of a circle. What can I do?


#2

Hi, it's a good idea, I gave it a shot here: http://sab.webflow.com/my-big-fat-circled-slider (the site is public you can clone it, follow the green link on top).

Don't have time right now to dive in to add interactions but I will, for fun (:

Also check this experiment, it's using a slider trigger interaction : http://sab.webflow.com/sliders/fancy-image-slider

btw circles are obtained by setting a 50% corner radius to any div, box, bloc, thing...


#3

Thank you! Great tip on 50%, never even thought of that!


#4

And of course when you do that, you need to also set the element to overflow:hidden.

You will find by yourself that if you don't add a class to the Mask element, and give him also the circular + overflow hiden property, the animation bugs: the slides aren't masked when the animation runs.


#5