jquery - bxslider not activating in tabs ui -
i searched problem in database, there no such problem.
i have 3 configured tabs (tabs ui) , slider in each of tab (bxslider).
html:
<div id="tabs"> <ul> <li><a href="#refrig">Грузовик-рефрижератор</a></li> <li><a href="#tent">Тентованный грузовик</a></li> <li><a href="#tral">Грузовик-трал</a></li> </ul> <div id="refrig"> <p> content 1 </p> <div class="moduletable_park-slider"> <h2>Галерея грузовиков</h2> <div class="slider_refr"> <ul> <li><img src="/images/trucks/refrig/fotolia_52239820_subscription_xxl.jpg"></li> <li><img src="/images/trucks/refrig/fotolia_55218754_subscription_xl.jpg"></li> </ul> </div> <div class="slider_refr-pager"> <a data-slide-index="0" href="/"><img src="/images/trucks/refrig/fotolia_52239820_subscription_xxl.jpg"></a> <a data-slide-index="1" href="/"><img src="/images/trucks/refrig/fotolia_55218754_subscription_xl.jpg"></a> </div> </div> </div> <div id="tent"> <p> content 2 </p> <div class="moduletable_park-slider"> <h2>Галерея грузовиков</h2> <div class="slider_tent"> <ul> <li><img src="/images/trucks/tent/fotolia_51570512_subscription_xl.jpg"></li> <li><img src="/images/trucks/tent/fotolia_52155382_subscription_xxl.jpg"></li> </ul> </div> <div class="slider_tent-pager"> <a data-slide-index="0" href="/"><img src="/images/trucks/tent/fotolia_51570512_subscription_xl.jpg"></a> <a data-slide-index="1" href="/"><img src="/images/trucks/tent/fotolia_52155382_subscription_xxl.jpg"></a> </div> </div> </div> <div id="tral"> <p> content 3 </p> <div class="moduletable_park-slider"> <h2>Галерея грузовиков</h2> <div class="slider_tral"> <ul> <li><img src="/images/trucks/tral/fotolia_15252289_subscription_xxl.jpg"></li> <li><img src="/images/trucks/tral/fotolia_39307969_subscription_l.jpg"></li> </ul> </div> <div class="slider_tral-pager"> <a data-slide-index="0" href="/"><img src="/images/trucks/tral/fotolia_15252289_subscription_xxl.jpg"></a> <a data-slide-index="1" href="/"><img src="/images/trucks/tral/fotolia_39307969_subscription_l.jpg"></a> </div> </div> </div> </div>
and js initialization:
$(function() { var slider2_initialized = false; var slider3_initialized = false; $( "#tabs" ).tabs({ activate: function( event, ui ) { var tablength = ui.newpanel; var tab_id = $(ui.newpanel).attr('id'); //alert(tab_id); if(tab_id == "tent" && slider2_initialized == false) { $('.slider_tent ul').bxslider({ controls: false, pagercustom: '.slider_tent-pager' }); slider2_initialized = true; } else if(tab_id == "tral" && slider3_initialized == false) { $('.slider_tral ul').bxslider({ controls: false, pagercustom: '.slider_tral-pager' }); slider3_initialized = true; } } }); $('.slider_refr ul').bxslider({ controls: false, pagercustom: '.slider_refr-pager' }); });
but when go second or third tab, there no content , slider loading.
Comments
Post a Comment