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

嗯，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;
}

它解决了问题。您可以尝试使用此代码，并让我知道它是否对您有用。

Flexslider滑动宽度问题

8 个答案: