Flexslider 幻灯片宽度问题

Question

我在使用 flexslider 时遇到了一个奇怪的问题。幻灯片 LI 没有获得正确的宽度，因此无法显示所有幻灯片。这仅在第一页加载时发生。一旦我切换到另一个选项卡并切换回来，一切看起来都很好。可能是 JS 加载问题？！

截图：here

flexslider.css

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); }

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true
    }); 
});

我也用 $(document).ready(function() 试过了，但还是同样的问题。

有什么想法吗？

Answer 1

好吧，维尔纳。

我最终得到了您的解决方案。很遗憾。

这是另一种方法。

/* SLIDERS in content */
$('.flexslider').flexslider({
    animation: "slide", 
    start: function(slider){
        $('.flexslider').resize();
    }
});

我选择不使用上面的代码的原因是当幻灯片更新到正确的宽度时有一个延迟并且做了一点跳跃。

如果有人有更清洁的解决方案 - 请告诉我。我正在使用最新的 flexslider - 这个问题似乎只是有时会发生。但是当它发生时……啊。

Answer 2

我遇到了同样的问题。

在会话中首次加载时，Flexslider 会获取滑块容器的宽度，如果它不明确，则其值为 0px。 然后幻灯片的宽度为 0px，您看不到它们。

为了避免这个问题，在滑块容器中固定一个宽度就足够了，在我的例子中是 604px：

<div class="flexslider" style="width: 604px">
    <ul class="slides">
        <li>
            <img id="slide1" />
        </li>
        <li>
            <img id="slide2" />
        </li>
    </ul>
</div>

Answer 3

我在使用 flexi 滑块时遇到了同样的问题。

尝试了上述解决方案，但对我不起作用。

我尝试使用以下代码更新 css 以解决此问题。

.flexslider .slides {
zoom: 1.1 !important;
}

它解决了问题。你可以试试这个代码，让我知道它是否适合你。

Answer 4

下面的代码/顺序可能会有所帮助；好吧，至少我已经成功了。

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function(){
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true,
     });
}); 
</script> 

Answer 5

我通过在我的 flexslider 调用中删除 minItems 解决了这个问题。似乎与maxItems 一起工作。

Answer 6

我发现了它为什么这样做，而且很简单。

是因为CSS！！！在滑块的 ul 上。

去掉 ul.slides 上的填充和边距

.slides{
    padding:0;
    margin:0;
}

在我这样做之后，每次调整大小都能在所有浏览器和移动设备上完美运行。

Answer 7

对我来说，问题在于标记。我有这个：

<div class='carousel-slides'>
  <div class='carousel-slide'></div>
  <div class='carousel-slide'></div>
</div>

---

$('.carousel-slides', context).flexslider({
  selector: '.carousel-slide'
});

...但似乎需要在每张幻灯片上应用到内部 div，这很荒谬。

<div class='carousel-slides'>
  <div class='carousel-slide'>
    <div class='carousel-slide-inner'></div>
  </div>
  <div class='carousel-slide'>
    <div class='carousel-slide-inner'></div>
  </div>
</div>

---

$('.carousel-slides', context).flexslider({
  selector: '.carousel-slide > .carousel-slide-inner'
});

Answer 8

也许另一个答案有点晚了，但是在尝试了这里和其他论坛的所有答案之后，我最终得到了自己的解决方案，与其他人类似，但至少我觉得它非常连贯和干净。

我在移动环境中遇到了问题，其中滑块位于一个选项卡内，一旦单击标题就会打开。内容在display:none 中，这会导致问题出现在 flexslider (v. 2.5) 中，即无法确定包含的幻灯片的正确宽度。

所以我纠正了我的 css 并通过可见性和不透明度将容器隐藏起来。

HTML 示例

<dd class="tab-container with-slider">
    <div class="flexslider">
       <ul class="slides">
          <li>whatever </li>
       </ul>
    </div>
</dd>

CSS：

/*all other containers behave well with display none/block so I leave them with normal behavior*/
 .parent dd.tab-container {  
        display: none; position: relative; 
 }
/*container with flexslider inside uses visibility and opacity to be hidden*/  
.parent dd.tab-container.with-slider{ 
     display: block; 
     height: 0px; 
     visibility: hidden; 
     opacity: 0;
 } 
.parent.accordion-open dd.tab-container.with-slider{ 
     height: auto; 
     visibility: visible; 
     opacity: 1;
 }

Js 是从基本示例直截了当的，仅此而已。

$j('.myTabOpener').click(function () {  
    var mySlider = $j(this).find('.flexslider');
    mySlider.flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        minItems: getGridSize(), 
        maxItems: getGridSize()
    });  
});