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

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

Kivy: Swiping (Carousel & ScreenManager) -

jdbc - Not able to establish database connection in eclipse -