I’m looking to basically create a full-browser background cover image slideshow that can:
- Be navigated by hovering over text (rather than slideshow dots or arrows)
- And also automatically advances every few seconds when the mouse isn’t currently hovering on one of the text items. It should stop when a mouse is hovering over the text, but continue to automatically advance again when the mouse moves off one of the items.
I hope that makes sense. I’ve seen this type of interaction on websites a lot but, of course, I’m having trouble finding a reference when I need it.
I built an example as close as I can get to it with Webflow below.
Direct Link to Example:
Project Page (Cloneable):
If you hover on each text, it reveals the corresponding background cover image. Currently, I’ve built the nav items as buttons with mouse hover triggered Webflow interactions.
So I just need to figure out the part where it can automatically advance every few seconds, like an autoplaying slideshow, when the mouse isn’t hovering over one of the text items. Essentially, I would need to activate the hover state (and trigger the hover interaction animation) of the next item every few seconds when the mouse isn’t currently hovering on one.
(EDIT: I guess it’s basically like a regular Slider with autoplay enabled, but with custom text for the Slide Nav instead of dots, numbers or squares. Please let me know if there’s an example of someone who has customized a Webflow Slider like that, or how you would recommend might be the best way to go about it.)
Sorry if something similar has been asked before. I didn’t know the proper terms to search for the sort of interaction I’m looking for here.