Question

我一起使用Bootstrap 2.3.2和Flexslider 2.6.3。我有一套带有两个标签的导航丸。每个选项卡都有一个带缩略图导航的独立Flexslider库。问题是在调整窗口大小之前，第二个选项卡上的缩略图是不可见的。我该如何解决这个问题？

Example

Answer 1

问题似乎是第二个滑块上的每个<li></li>标签的宽度都是0px。

  <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代码

两个不同选项卡上的Flexslider图像库

1 个答案: