부트 스트랩 3 탭의 BxSlider

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

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

});

그래서 결국 목록 높이 및 너비 특성을 부여했습니다. 그러나 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]