▼
Streaming live at 10am (PST)

Custom slider nav with slider nested in Tabs widget

#1

I created 2 sliders inside tabs. and added custom code so i have a custom navigation. instead of dots.

please review:
https://preview.webflow.com/preview/automotive-minisite?preview=cf4df78a4238de8ac449fa4076fe369b

for some reason the interaction only works on one of the sliders and not on both (being in different tabs.

Please help

#2

Hi @Tal_Shpon, it looks like the slider needs to be redrawn, when the tab with the second slider goes from Display none to display block. Since the initial state of the second slider is set to display none, the slider has not fully loaded yet.

I would use this custom code to redraw the slider: Webflow.require('slider').redraw();

This custom code function can be used with your custom code to redraw the slider, and should be placed before the return of false, for example: 

$('.nav11').click(function() {
        sliderdots.eq(0).trigger('tap');
        Webflow.require('slider').redraw(); 
        return false;
    });

Save changes and republish the site, and see if that helps. Update all your nav functions with the code.

I hope this helps!

#3

Webflow.require('slider').redraw(); - should i leave slider as is or rename to sliders class?

#4

Hi @Tal_Shpon, try it as is, and after updating the custom code in all the functions, let me know, I am happy to take another look.

#5

still not working. can you take a look?
https://preview.webflow.com/preview/automotive-minisite?preview=cf4df78a4238de8ac449fa4076fe369b

#6

Hi @Tal_Shpon, looks like there might be some jquery undefined errors:

no_jquery_loaded.png988x632 71.3 KB

I would put the custom code <script> in the Footer, not in the header

Let me know how it works out!

#7

still dosnt working. any ideas?

#8

Cyberdave please help. this website should be launched sunday and this is the only feature not working.

#9

Hi @Tal_Shpon, well, if custom code is needed to get something to work, then we do not support it as a feature generally, and rather look for re-design/re-structure using the built in tools to meet certain design scenarios.

At the moment, I do not have a solution to get the custom code to work on the nav button on the slider.

I think I was able to find an alternate, non-code solution using tabs nested within tabs, take a peek at a quick video I made, to show how to do it at a high level:

I hope this helps!

#10

thnx. your a genius cyberdave

closed #11

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