显示先前隐藏的div时重新装载bxSlider

问题描述：

bxSlider具有在特定操作下重新加载滑块的功能。我初始化多个滑块我的网页上以下列方式：显示先前隐藏的div时重新装载bxSlider

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' 
    }); 

});

使用jQuery easytabs的标签布局，第一滑块在第一（即可见）选项卡，并运行良好，而在产生第二最初隐藏的div。由于bxSlider将滑块的高度设置为div，并将display：none设置为0，所以第二个滑块具有零高度图像。可见性：隐藏不是一个选项，因为标签界面不允许这样做。有了这个多滑块功能，我怎样才能触发我的滑块重新加载特定动作，如点击标签标题？

尝试增加给你的CSS'.bx视口{最小高度：90vh;}'根据需要调整。 – zer00ne

@ zer00ne不幸的是，这并不容易:(在大屏幕上，高度变得很大（由于视角的90％），在较小的情况下效果可能会更好，但将视口高度设置为条件只能导致问题，对吧？ – physalis

根据需要调整，关键是如果你在'.bx-viewport'上设置了'min-height'，bxSlider会尊重这个高度，这会在它加载，重新加载，调整大小等时发生。如果你将它设置为一个小的尺寸，比如说200px，它最初将会是0，它会在一秒内变成200px，然后扩展到它的内容高度。 – zer00ne

答

我自己不使用bxSlider，但是我猜你可以使用bxSlider的“reloadSlider”功能。

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

只要保持你的滑块参考在初始化，然后调用reloadSlider就可以了，只要更改标签，而你的情况，方便的标签必须利用easytabs的：事件发生后。

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(); 
});

上EasyTabs'事件挂接这里的更多信息： https://os.alfajango.com/easytabs/#configuration

嗯，我已经在那条路上了，但它实际上并没有重新加载旋转木马。我相信这是由于每个功能，因为我在第一个和最后一个选项卡上有一个传送带。我使用class .tabs作为轮播容器而不是ID。 – physalis

您确实必须为每个滑块保留一个参考并重新加载每个滑块 –

显示先前隐藏的div时重新装载bxSlider

相关推荐