Want to create a slider with navigation buttons or a tab widget that autoplays

Design help General
1

Hello everyone!

I have a small challenge I’ve been grinding out, and I’m not quite sure my approach thus far is going to get my what I want.

I’m trying to create an autoplaying slider that also provides Tabs for use in navigating to particular slides, just as this template does in it’s hero section: Demo Preview for Intersco - Logistic & Transportation Website Template #61391

If you checkout my share link, you’ll see that I used the tabs component and basically was able to recreate the component in the template mentioned above. However, it doesn’t autoplay (which is what I really want at this point). I’m not aware of any method that could be used to autoplay the tab planes in the webflow widget (or to somehow activate each navigation tab in sequence and in an infinite loop).

I chose not to start with the slider widget because I knew that I couldn’t do anything to customize the small, circular nav icons packed into the widget. At least, I don’t think I can customize those in the way one could with the Navigation Tabs in the tab widget.

Any suggestions for how I can add an autoplay property to this… erm… doohickey I’m trying to make??

Thanks!

Here is my public share link: LINK
(how to access public share link)

2

You can get some direction here:

It would require custom code because theres no native way to do that in WF at least none that I know of.

3

Ah, ok.

So, I should build this component in the Slider widget and add a HTML embed to apply the CSS properties to the dot classes… Would this enable me to recreate the squares with background images and text content as well? Could I somehow insert content into the slider dots??

Thank you for the reference!

4

If you are going the custom code way, the slider will be more suited to base the code off from. Just hide the dots, and use the custom code to sync the slides current state to the thumbnail, and click event handler on the thumbnail to activate the respective slide.

If you need help implementing this, you can reach me here.

5

I’m leaning towards the conclusion that if I can’t get this component can’t autoplay, that I may scrap it.

I would definitely need some implementing custom code into this component, and I appreciate your offer to help out! I will try rebuilding the component in the slider and getting as far into your instructions as i can (might not be very far lol).

You’re pretty sure this can be pulled off then? I’m still considering how the tabs would appear in mobile… I was thinking that each tab would be replaced with an icon so that a 1x4 row of icons would stretch across the bottom of the tab pane (or slider pane) and serve as the nav links.

Let me play around some more and then I’ll reach out for some assistance when I’m ready.

Thank you!

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.