Question

我正在尝试使用flex滑块，其中我的非活动幻灯片的不透明度为0.5，主要完全可见。视口设置为1280px宽，幻灯片应在视口中居中。但是在第一次加载页面时，直到滑块移动到下一张幻灯片并在此后滑动，li不会在视口中居中。

我已经对问题进行了演示：http://jsfiddle.net/XMXGJ/94/

你会在第一次加载时注意到你看到两张幻灯片的一部分，直到它移动到下一张幻灯片，然后li就像它应该的那样居中。

出于演示的目的，我将flexslider设置为350px宽。我想要实现的是在第一次加载时让第一张幻灯片在视口中居中。

HTML：

<div class="flexslider loading">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
  </ul>
</div>

JS：

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    startAt: 0,
    start: function(slider) {
        slider.removeClass('loading');
    }
 });

CSS：

.flexslider {
  margin: 0;
  height: 483px;
  background: #fff;
  position: relative;
  zoom: 1;
  overflow: hidden;
}

.flex-viewport {
  width: 350px;
  margin: 0 auto;
  overflow: visible;
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.loading {
  max-height: 483px;
}

.flexslider .slides {
  zoom: 1;
}

.flexslider .slides li {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.flexslider .slides li.flex-active-slide {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.carousel li {
  margin-right: 5px;
}

Answer 1

幻灯片以线性顺序显示.. 我添加了内联样式。

<div class="flexslider loading" style="text-align:center;">
<ul class="slides" style="margin:0 auto;">
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
<li>
  <img src="http://placehold.it/350x150" />
</li>
</ul>
</div>
</center>

Answer 2

我有一个类似的问题，我通过使用flexslider的 start 和 end 属性来检查幻灯片的位置，并将其与父容器的位置（.flex-viewport），然后使用内联样式调整该第一次出现的幻灯片的位置，然后在第一次运行后使用flexsliders end（）属性将其删除。

if(jQuery().flexslider) { // check that flexslider is a loaded function
     jQuery('#my-slider .flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            start: function(slider){
                var activeslideXpos = Math.round(jQuery('.flex-active-slide').position().left);
                if ( activeslideXpos < 0 ) { // check if value is negative and is offset incorrectly
                    var offset = Math.abs(activeslideXpos);
                    jQuery('.flex-active-slide').css({left:offset, position:'relative'});
                }           
                jQuery('.flexslider').removeClass('loading');
            },
            end: function(slider){
                jQuery('.slides li').css({left: '', position: ''});
            }
    });
}

Flexslider在第一次加载时视口内的li居中不起作用

2 个答案: