Bxslider Not Working on Bootstrap Tabs When i change tab

Question

i am using bxslider on my new web page with bootstrap.

I tried to put different sliders for each tab.

When website loads first time everything okey but when i change div bx slider is not loading and showing contentet truthfully

http://ozgurkalyoncu.com/bxsliderbootsrap/

Answer 1

Try disabling the adaptive height feature:

adaptiveHeight : false

It looks like the script is setting the height to 0 on the following element:

.active > .bx-wrapper > .bx-viewport

I'm guessing that this is related to the adaptive height feature.

---

You can also try to use CSS to prevent the height from being set to 0:

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

Answer 2

i found solution

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