Slider: how do I make arrows relative to an element inside the slider?

I’m trying to make a testimonial type slider where the arrows are around the person’s name at the bottom. You’d click the arrows and it would change to another testimonial by someone else. Obviously when the names are different lengths, this will effect the positioning of the arrows.

I had hoped I could just make the arrows absolute and relative to the names, but I can’t do this. Anyone know a work around? I’ve attached a screenshot of my initial design to show what I mean…


Here is my site Read-Only: https://preview.webflow.com/preview/onyx-c5d849?utm_medium=preview_link&utm_source=designer&utm_content=onyx-c5d849&preview=24b3b8d0e1c3c179af42e328e87a248f&mode=preview

The native slider component kind of lacks that feature, you could create a custom slider (not that difficult)

Here’s some nice videos on that

Or you could use JS to bind your own arrow to a click listener and simulate a click on the arrow of the slider (which you hid by default)

1 Like

Thanks! Those videos are super helpful.

1 Like