I am a newbie so don't judge! but basically, i would like to have a slider with a costumed slider nav that could pretty much be whatever I want it to be, like titles and stuff instead of the buttons, and that would allow people to change slides when hovering over the button.

There are many ways you can approach this design in Webflow. There are limitations.

Tabs: they won't fade one to another automatically, and the fade will be a fade to black/fade from black. No change on hover.Sliders: they cycle automatically but they won't fade but slide. No change on hover.

Custom: you can achieve the exact same fade but you'll need javascript to cycle the slides. You can set the preview on hover. Requires quite some interactions.

Using a javascript approach with the slider may be a fairly big leap if you are new to webflow, but it would do the trick. (I am working on an almost identical approach to the original inspiration you posted) Tabs may be a simpler approach as @vincent created and is super close.

bartekkustra's external button script for the slider works for this perfectly for a javascript implementation if you choose to go that route. It can easily be modified to work on hover if you change the .click to .hover for each instance in the js .

I prefer bartekkustra's javascript method with a slider over using the tabs component because you have more control over transitions and can use the slider crossfade + the option for auto play. I added some personal notes at the bottom of the code that may help speed setup, they are the parameters I struggled with initially in getting everything in order for it to work.

I'm trying to implement buttons that will take a user to a specific slide in a slider. I've tried giving both the slide and the image within the slide uniqueID's and linking the buttons to those, however they don't seem to have any effect at switching to the active slide.
Thanks, David

Well my first post was to thank you and ask you for more details but digging in (and using my brain a little) I succeeded in doing what you did! Thank you so much again for responding so quickly and helping get the result I was looking for!

Hi @Amath_Mbaye, I thought it would be fun to try and remake the slider using interactions. I was able to get the hover effect to work pretty nicely, but can't make the slides automatically change when not hovering. Might be able to do it with custom code though

@GenKazak, The ct-tabWrapper has the interaction. (see the navigator for heirarchy) Each ct-tabWrapper is the parent and contains ct-tabPane (the full frame image) and uses limit to nested elements so the same "Custom Tabs on Hover" interaction can be applied to all of them. William left the interaction off of the first of the five instances so it would display as the init or default.

@thewonglv - great structure and approach William! Was interesting to poke around and see how you accomplished it. The javascript from @bartekkustra I posted above works great as a scripted version and doesn't kill auto playback, but it also doesn't remain paused on hover either.

I would love to one day have simple hooks for the slider to coordinate or be driven by other interactions or external buttons/links ( play / pause / next / back / resume / goToAndPlay or goToAndStop on n slide ). The slider is a very accessible and potentially a tremendously powerful content / dispatch / event handler that would make a world of things possible. With those base hooks exposed and available in IX it would be unstoppable (mild pun intended)

Things it would enable: - Init slide when user scrolls into view. - the example by the original poster of this thread. - non-linear storytelling using IX rich animations / infographics / walkthroughs. - adaptable, contextually custom slider UI so that behaviors like pause on hover / resume. - designers choice of user interaction suitable to the content and context.

Great work @EvanJones - cloned as well. Looking forward to playing around with this.

The mobile version would probably be easiest to implement as a whole separate structure and simply swap visibility on devices. The only snag would be horizontal tablets (ipad) which will display the desktop instead. It may be worth adding a click and pressed state to the hover interactions using a simple link box button to accommodate that since hover won't exist on tablet.