Class Names for Slide Controls

Design help Animations & Interactions
1

Hey fellow Webflowers,

I’ve gone through the Forum posts and tried to find a simple answer to this simple question, but haven’t had luck yet. I’m hoping someone can answer this quickly.

I’m wanting to create fully-customised nav buttons (arrow for next and prev slides) in a slider. I know I could edit and adjust what’s in the slider already, but it would be nice if I could throw a div or link block into the Slider cluster, style as I need, and then make it work when clicked.

In looking at the exported class names, it appears w-slider-arrow-left and w-slider-arrow-right are the two styles in use by the slider, but when I use those as class names for my custom buttons, nothing happens when clicking them in the published test.

Given that on different pages, I would like to create custom designs for each type of next/prev situation, having the ability to “activate” an element to be recognised as the next/prev buttons would be huge.

Am I missing something here? Is there an ID which needs to be assigned to each of the buttons? If anyone can point me in the right direction, that would be great, thank you.

Share link here:
https://preview.webflow.com/preview/technical-builders?utm_source=technical-builders&preview=88e2f5076f7ab09c1f10f931c5c455be

Steve

2

I’ve done a fix using @samliew’s excellent suggestion from this post:

Just seems like there could be a more elegant solution, without the need for custom code? Not that it’s much… :slight_smile:

3

When I click on the colored boxes at the bottom… the slides do change.

4

Yes, because I already added in a solution which @samliew had posted a while ago. I was just curious if anyone had a more elegant solution?

Thank you for checking though,
Steve

5

If you want more customization my fav Slider is this:
http://kenwheeler.github.io/slick/

6

Thanks @Noah-R, I will check this out!

Steve

1 Like
7

No problem man! Best of luck!