Circular Slider with CMS
Hey all! What's the best approach to built circular slider with CMS data. Where the active item shows the info in the left.
4 Replies
Is this from a Figma design or website? Can you share a live link if it’s a site?
I think CSS recently shipped cos and sin math functions actually
Might be a good use case@for that!
@Kudz weren’t you working on a circular thing a few weeks ago?
@Anish how does the user navigate this slider? Click or scroll?
Or both?
@Web Bae only on click of round buttons, no scroll.
On active state, this button scales slightly larger.
And the corresponding slide shows up.
Sure
These are tricky actually. I don’t have time to play with it anytime soon.
I tried with swiped once before using the slide transition event but the animation does play until the transition is complete
Maybe there is a better way though.
@Web Bae @Anish
Here is the circular slider I was working on
Live Link:
https://round-slider.webflow.io/
Preview link:
https://preview.webflow.com/preview/round-slider?utm_medium=preview_link&utm_source=designer&utm_content=round-slider&preview=22ab5c9719d0de5f71bdfe5631b88b6d&workflow=preview
@Anish I set the the circle positions manually but you can set the using javascript.
If it's on click, you can add a custom event listener to each dot. The Dots are html so you can add the onclick event to them.
The circle and progress bar in the back are done with svg. I'm animating the progress bar with stroke-dasharray and stroke-dashoffset.
You can take the javascript code in the head tag or use this codesandbox link. Its the hoverDots.js file: https://codesandbox.io/s/round-slider-9e09h5?file=/hoverDots.js:0-2288
I got busy before completing it though so the code will look like spaghetti lol.