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

嗯，Werner。

我最终得到了你的解决方案。 不幸。

这是另一种方法。

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

我选择不使用上述代码的原因是，当幻灯片更新到正确的宽度时，有一个延迟并略微跳转。

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

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

以下代码/订单可能有所帮助; 至少我已经取得了成功。

<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 4

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

Answer 5

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

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

取下ul.slides上的填充物和边距

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

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

Answer 6

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

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

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

我在移动环境中遇到了问题，其中滑块位于标签内，只需单击标题即可打开。 内容display:none ，这导致问题为flexslider（v.2.5），无法确定所包含幻灯片的正确宽度。

所以我纠正了我的CSS并将容器隐藏在playng中，具有可见性和不透明度。

Html sampl

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

Answer 8

我遇到了与flexi滑块相同的问题。

试过上面提到的解决方案，但它对我不起作用。

我尝试使用以下代码更新css作为此问题的转变。

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

它解决了这个问题。 您可以尝试使用此代码，并告诉我它是否适合您。