BxSlider on bootstrap 3 tab

Question

Я хочу показать карусель bxslider на второй вкладке бутстрапа. Я использовал следующее, чтобы показать bxslider.

<script type="text/javascript"> 
jQuery(function() { 
    jQuery("#more-info a.a-tab").one("click", function (e) { 
     var tab_id = jQuery(this).html(); 
     if (tab_id == "this_is_title_of_div") { 
      var slider = jQuery(".bxslider_div"); 
      if (slider) { 
       jQuery(".bxslider_div").show(); 
       jQuery(".bxslider_div").bxSlider({ 
        slideWidth : 300, 
        minSlides : 1, 
        maxSlides : 3, 
        moveSlides : 1, 
        slideMargin : 10, 
        pager : false 
       }); 
      } 
     } 
    }); 
}); 

</script> 

Проблема в том, что я хочу загрузить его один раз и не загружать его снова, когда я нажимаю на него. Карусель полностью сломан на этой вкладке.

Answer 1

Поддержание stat для вашего bxslider init. Сделайте проверку перед ее началом и установите stat как true.

Попробуйте это:

$(function(){ 
    var tabInitiated = false; 

    $("#more-info").on("click", "a.a-tab", function (e) { 
     if($(this).text() == "this_is_title_of_div"){ 
      $(".bxslider_div").show(); 

      if(!tabInitiated){ 
       $(".bxslider_div").bxSlider({ 
        slideWidth : 300, 
        minSlides : 1, 
        maxSlides : 3, 
        moveSlides : 1, 
        slideMargin : 10, 
        pager : false 
       }); 
       tabInitiated = true; 
      } 
     } 
    }); 
}); 

Answer 2

Здравствуйте Ashish это из вашего затруднительного, что я придумал это. это, казалось, сделало это

  jQuery(function(){ 
     var tabInitiated = false; 
    jQuery("more-info a.a-tab").on("click", function (e) { 
    if(jQuery(this).text() == "this_is_title_of_div"){ 
     if(!tabInitiated){ 
     alert(tabInitiated); 
     jQuery(".bxslider_div").show(); 
     jQuery(".bxslider_div li").css("height", "375px");   
      jQuery(".bxslider_div").bxSlider({ 
       slideWidth:1100, 
          auto: true, 
          autoControls: true, 
          slideMargin:20 
      }); 
     jQuery(".bxslider_div li").css("width", "1100px"); 
      tabInitiated = true; 
     } 
    } 
}); 

});

Итак, в конце концов я дал список атрибутов высоты и ширины. Но вы должны указать атрибуты width после загрузки bxslider. Большое спасибо за ваше лидерство. Я также нашел эту ссылку, которая может помочь кому-то еще http://www.aeonlighting.url.tw/en/tt.html

Answer 3

$(".tabs-1").click(function() { 
    $('#tabs-1 .bx-viewport').css("height","433"); 
    $('#latest_pros .dishes-item').css("width","245"); 

}); 
$(".tabs-2").click(function() { 
    $('#tabs-2 .bx-viewport').css("height","433"); 
    $('#latest_pros .dishes-item').css("width","245"); 

}); 
$(".tabs-3").click(function() { 
    $('#tabs-3 .bx-viewport').css("height","433"); 
    $('#latest_pros .dishes-item').css("width","245"); 

}); 
demo http://indiawings.co.in/ 
[http://indiawings.co.in/][1]