当我更改选项卡时，Bxslider无法在Bootstrap选项卡上运行

Question

我在带有bootstrap的新网页上使用bxslider。

我尝试为每个标签添加不同的滑块。

当网站首次加载所有内容时，但是当我更改div时 bx滑块未加载并如实显示contentet

http://ozgurkalyoncu.com/bxsliderbootsrap/

Answer 1

尝试禁用自适应高度功能：

adaptiveHeight : false

看起来脚本在以下元素上将高度设置为0：

.active＆gt; .bx-wrapper＆gt; .bx视口

我猜这与自适应高度特征有关。

---

您也可以尝试使用CSS来防止高度设置为0：

.bx-viewport{min-height:125px}

Answer 2

我找到了解决方案

<script type="text/javascript">
$( document ).ready(function() {

$("#myTab li").click(function() {
    if (!$(this).hasClass("active")) {
setTimeout(function() {
ticaricar.reloadSlider(); 
binekcar.reloadSlider();}, 200);} });

var binekcar = $('.binekcar').bxSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 6,
slideMargin: 10,
pager:false,
controls:true,
auto: true,
speed:2000,
pause: 10000, 
moveSlides:1,
nextText: '',
prevText: '',
mode:'horizontal',
adaptiveHeight : 'true'
});


var ticaricar = $('.ticaricar').bxSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 6,
slideMargin: 10,
pager:false,
controls:true,
auto: true,
speed:2000,
pause: 10000, 
moveSlides:1,
nextText: '',
prevText: '',
adaptiveHeight : 'true'
}); });