두 개의 서로 다른 탭에서 Flexslider 이미지 갤러리

Question

저는 부트 스트랩 2.3.2와 Flexslider 2.6.3을 함께 사용하고 있습니다. 두 개의 탭이있는 nav-pills가 있습니다. 각 탭에는 축소판 탐색 기능이있는 별도의 Flexslider 갤러리가 있습니다. 문제는 창 크기를 조정해야 두 번째 탭의 축소판이 보이지 않는다는 것입니다. 이 문제를 어떻게 해결할 수 있습니까?

Example

Answer 1

문제는 두 번째 슬라이더에 <li></li> 태그의 각이 0 픽셀의 폭을 가질 것 같다.

<div id="carousel2" class="flexslider carousel"> 
    <div class="flex-viewport" style="overflow: hidden; position: relative;"> 
    <ul class="slides" style="width: 600%; transition-duration: 0s;"> 
    <li class="flex-active-slide" style="width: 0px; margin-right: 3px; float: left; display: block;"><img src="images/tn-space1.jpg" draggable="false" /></li> 
    <li style="width: 0px; margin-right: 3px; float: left; display: block;"><img src="images/tn-space2.jpg" draggable="false" /></li> 
    <li style="width: 0px; margin-right: 3px; float: left; display: block;"><img src="images/tn-space3.jpg" draggable="false" /></li> 
    </ul> 
    </div> 
    <ul class="flex-direction-nav"> 
    <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li> 
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li> 
    </ul> 
    </div> 

자동으로 폭을 설정하고 이미지가 보여 그들이

그것은 그 인라인 스타일은 JS 파일로 출력 할 수 있기 때문에 적절하게 결정하기 어려운 크기를 조정 없이는 내 시스템에 즉시해야 우리가 할 수없는 등 사이트를보고 말하십시오. 그래도 작동하지 않으면 코드 스 니펫을 만들어 기본 HTML, CSS 및 JS 코드를 제공하십시오.