Slider; text instead of dots

Hi there, does anyone know if it is possible to have text instead of dots in the slider feature?
I am trying to do a similar landing page like this. Where when you hover over the text the image changes.
https://www.drewgarvey.com/

Best way to do this is to just use interactions to show/hide different divs with different images. Reveal on hover | Webflow University

1 Like

Thanks for responding!
So when I try to do it that way it won’t let me have hovers in the same spot. I think that is the issue.
https://webflow.com/design/test-37b5d6

Sorry you can see on this link https://preview.webflow.com/preview/test-37b5d6?utm_source=test-37b5d6&preview=af2b958cd9f31d65638d6ae9b92b4258

Sure you can. Just put your background divs with a lower z index than your links and use a show/hide interaction.

I am probably doing something wrong but it won’t let me set a duration of the hover.
I thought it was because I had the video set to 100vh but I changed it to 1920px x1080px and it is still not working.
https://preview.webflow.com/preview/adriennestevson?utm_source=adriennestevson&preview=cc1b82147526da6b43f646c8f5b721f6

Wait a minute. You originally said you wanted to do an image swap hover. Videos are a whole different animal. I’d strongly suggest not doing this unless you want to crash people’s browsers due to crazy load times.

If you still want to proceed, wrap your video elements in a div and trigger that div for the show/hide interaction.

You also shouldn’t be using H1’s for your link text. If you are very new to Webflow I suggest checking out Webflow university to get comfortable with web standards of structure and what elements to use where.

Using just CSS to add text labels to the Slider. Add the CSS to your custom styles.

First, remove the current dots;

.w-slider-nav.w-round > div { background: none; }

Then override the width and colour settings and add font styles;

.w-slider-dot { width: auto; height: auto; background-color: rgba(255, 255, 255, 0); margin-right: 10px; font-family: Arial, Helvetica, sans-serif; color: black; font-size: 20px; line-height: 28px; opacity: 0.3; /*Faded text for non current slide*/ }

Make sure the active dot is opaque;

.w-slider-dot.w-active { opacity: 1; }

Depending on how many slides you have, add text using the ‘CSS Content’ property;

.w-slider-dot:nth-child(1):after { content: "Slide 1"; }
.w-slider-dot:nth-child(2):after { content: "Slide 2"; }
.w-slider-dot:nth-child(3):after { content: "Slide 3"; }

That’s all. Enjoy.

2 Likes