logo标签列表

Flexslider幻灯片宽度问题

widthloadingflexslider
8

我使用flexslider时遇到了一个奇怪的问题。幻灯片中的LIs没有正确的宽度，因此无法显示所有幻灯片。这仅在第一次加载页面时发生。一旦我切换到另一个选项卡并切换回来，一切都看起来很好。可能是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())，但问题仍然存在。有什么想法吗？
1
以下的答案都不起作用。 - Shail
8个回答
16

嗯，Werner。

最终我采用了您的解决方案。不幸的是。

否则，这是另一种方法来完成它。

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

我选择不使用上面的代码的原因是，在幻灯片更新到正确的宽度时会出现延迟并产生轻微跳跃。

如果有人有更清洁的解决方案 - 请告诉我。我使用的是最新版本的flexslider，这个问题似乎只有有时才会出现。但当它出现时... 嗷嗷叫。

谢谢 @Martin 我已经解决了我的问题。 - Amit Garg
@Martin Klasson：谢谢！运行得很好。 - Developer
6

我曾经遇到过同样的问题。

在第一次加载会话时，Flexslider获取幻灯片容器的宽度，如果没有显式指定，其值为0像素。 然后幻灯片的宽度为0像素，你看不到它们。

为了避免这个问题，只需要在幻灯片容器中固定一个宽度，例如我这里是604像素：

<div class="flexslider" style="width: 604px">
    <ul class="slides">
        <li>
            <img id="slide1" />
        </li>
        <li>
            <img id="slide2" />
        </li>
    </ul>
</div>
3
这似乎是唯一能帮助我的方法 - 我尝试使用 .resize() 和重新排列我的 JS 代码，但都无济于事！ - Karl
如果您的Flexslider是响应式的，请使用常量宽度和最大宽度来确保滑块不超出其父容器，例如： 宽度：620像素； 最大宽度：100%； - arekk
1
我在使用flexi slider时遇到了同样的问题。 尝试了上述提到的解决方案，但对我没有用。 我尝试使用以下代码更新css来解决这个问题。
.flexslider .slides {
zoom: 1.1 !important;
}

它修复了问题。您可以尝试此代码，并让我知道是否适用于您。
0

我找到了为什么会这样做的原因，而且很简单。

这是因为滑块中ul上的CSS！！！

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

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

在我做了这个之后，调整大小在所有浏览器和移动设备上都完美地工作了。

0
也许对于另一个答案来说有点晚了，但在尝试了这里和其他论坛上的所有答案之后，我最终得出了自己的解决方案，类似于其他人的解决方案，但至少我认为它相当连贯和干净。

我在移动环境中遇到了问题，在其中滑块位于打开标题时立即打开的选项卡内。 内容在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()
    });  
});
0

以下的代码/顺序可能会有所帮助；至少我用它取得了成功。

<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>
你刚刚解决了我的问题，非常感谢！！现在我可以睡觉了，谢谢。 - ncesar
0

我通过在我的Flexslider调用中删除minItems来解决了这个问题。不过使用maxItems似乎可以正常工作。

0

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

<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'
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接