bxSlider erneut laden, wenn zuvor verborgenes div angezeigt wird

Question

bxSlider verfügt über eine Funktion, um Slider bei einer bestimmten Aktion neu zu laden. Ich initialisieren mehrere Schieberegler auf meiner Seite in folgender Weise:

jQuery('.product_carousel_images').each(function(index,item) { 

    jQuery(item).bxSlider({ 
     mode: 'fade', 
     speed: 600, 
     pause: 7000, 
     auto: false, 
     controls: false, 
     pager: true, 
     pagerCustom: '.product_carousel_pager' 
    }); 

}); 

Mit jQuery EasyTabs für eine Registerkarte Layout, der erste Schieber in der ersten (dh sichtbar) Register ist und gut funktioniert, während die zweite in ein erzeugt wird anfangs verstecktes div. Da bxSlider die Höhe eines Schiebereglers innerhalb eines div mit display: none auf 0 setzt, hat der zweite Schieberegler Bilder mit einer Höhe von null. Sichtbarkeit: Versteckt ist keine Option, da die Tabs-Oberfläche dies nicht erlaubt. Wie kann ich mit dieser Funktion für mehrere Schieberegler ein neues Laden meiner Schieberegler für eine bestimmte Aktion auslösen, z. B. das Klicken auf eine Registerkartenüberschrift?

Answer 1

Ich benutze nicht bxSlider selbst, aber ich schätze, Sie können bxSliders "reloadSlider" -Funktion nutzen.

http://bxslider.com/examples/reload-slider

Halten Sie einfach eine Referenz bei der Initialisierung auf Ihren Schieber, dann reloadSlider auf ihn nennen, wenn Sie Registerkarten ändern, was in Ihrem Fall mit einfachen Tabs haben würde auf der EasyTabs machen: nach der Veranstaltung.

var slider = jQuery(item).bxSlider({ 
    mode: 'fade', 
    speed: 600, 
    pause: 7000, 
    auto: false, 
    controls: false, 
    pager: true, 
    pagerCustom: '.product_carousel_pager' 
}); 
// Reload slider whenever tab changes 
$('#your-tabs-container').bind('easytabs:after', function() { 
    // TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed 
    slider.reloadSlider(); 
}); 

Mehr Informationen über EasyTabs Event Haken hier: https://os.alfajango.com/easytabs/#configuration