Streaming live at 10am (PST)

Tabs / Slider - Need solution

I need to do something that looks like this, but rotates the slides automatically. (scroll down)

So I’d either need the Tab module to autoplay or the points of the slider module replaced by tabs. Any ideas for a solution?

1 Like

Need a solution for this one to

1 Like

So you need 3 tabs with a slider in each tab ?

I din’t think you can (currently) natively jump to a specific image in Webflow.

Might be able to with jquery though. Have not tried it.

What type of transitions? Scroll or crossfade? I created 3 versions of tabs with interactions (no autoplay):

vertical scroll
fade cover overlay
hover swap

@bartekkustra has a javascript solution he shared on the forum for a set of external buttons that work fine for this with the slider allowing you to externally navigate to any slide - it works great. The issues are that once you interrupt the slider by clicking anywhere within it there is no resume play that I am aware of, so don’t nest the buttons within the slider.
I have seen a script to prevent interruption, but ran out of time and haven’t been able to get it to work yet.

Also, if the slider is set to auto-play, the script bartekkustra wrote will goto a given slide, but not prevent the progression of the interval timer. You could easily add a script property for the hover - the issue would be knowing what hook to use to temporarily pause / halt playback when you are over the button and resume on roll out.

I think if it is just 3 tabs an interactions approach would work, but you would have to script the loop timing manually with offsets. - or if a vertical or horizontal scroll would work this could be very easy with interactions.

There could also be a separate script that will work like slider but on tabs. It will trigger to click the button of next tab and loop it. Time Interval could be settable around 5s and on click you could pause it or resume. But that would require few hours to script it properly and hook it to Webflow.


1 Like

I meant rotate the “tabs” :smile: