bxslider가 부트 스트랩 3 탭에로드되지 않습니다.

Question

프로젝트에 대해 bxSlider 및 Bootstrap 탭을 사용하고 있습니다. 세 개의 탭에서 세 개의 슬라이더를 사용했습니다. 활성 탭은 bxSlider이지만 다른 탭을 클릭하면 더 이상 슬라이더를로드하지 않습니다.

<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"> 
     <a href="#home" role="tab" data-toggle="tab">Home</a> 
    </li> 
    <li role="presentation"> 
     <a href="#profile" role="tab" data-toggle="tab">Profile</a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home"> 
     <ul class="bxslider-two"> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
     </ul> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="profile"> 
     <ul class="bxslider"> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
      <li> 
       <img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" /> 
      </li> 
     </ul> 
    </div> 
</div> 

활성화 : 위해

$(document).ready(function() { 
    $('.bxslider,.bxslider-two').bxSlider(); 
}); 

Sample project

Answer 1

제대로 슬라이더가 볼 수 있어야 초기화합니다. 첫 번째 탭의 슬라이더는 bxSlider()이 호출 될 때 보이기 때문에 작동합니다. 하나의 아이디어는 탭이 클릭 될 때까지 기다리기위한 것입니다. 예를 들어 jsfiddle을 수정했습니다.

새로운 jQuery를 :

$(document).ready(function() { 
    $('.bxslider-two').bxSlider(); 
}); 

$('a[href="#profile"]').one('shown.bs.tab', function (e) { 
    $('.bxslider').bxSlider(); 
}); 

Answer 2

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

$(".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"); 
}); 

Answer 3

$(document).ready(function() { 
    $('.bxslider-two').bxSlider(); 
}); 

$('a[href="#profile"]').one('shown.bs.tab', function(e) { 
    $('.bxslider').bxSlider(); 
});