width - Flexslider 幻灯片宽度问题

Question

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

截图：这里

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

我通过删除minItems我的 flexslider 调用解决了这个问题。似乎可以使用maxItems。

Answer 5

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

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