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:
https://bg-image-hover-nav-example.webflow.io/
Project Page (Cloneable):
https://webflow.com/website/bg-image-hover-nav-example
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.
I imagine it would be a custom javascript code solution, but I wanted to check with the community here to see if there’s a way to do that sort of thing with Webflow’s built-in tools that I am unaware of or haven’t thought about.
(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.)
If it is only a custom javascript code solution and someone happens to have one already or know how to write it quickly, I’d really appreciate it. If not, I will work on figuring it out, but I just wanted to check here first, since I imagine someone else must have done this with Webflow already.
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.
Thanks!