FlexSlider：居中当前图像

Question

我使用bjqs滑块（它的响应能力低于）使用流行的FlexSlider。我修改了bjqs滑块以显示屏幕中心的“当前”图像，在当前图像之前和之后（部分）显示上一个和下一个图像。您可以使用bjqs滑块here查看我的实现，以了解我所追求的内容。

现在使用FlexSlider，我无法找到一种方法来做到这一点。图像向左浮动，因此“当前”图像定位在容器的左侧。有人知道这样做的方法吗？

现在我只是使用FlexSlider的默认样式和标记，使用以下javascript：

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 850,
  });

Answer 1

我遇到了同样的麻烦，答案就在于CSS。

我的HTML格式是这样的：

<div id="slider" class="flexslider">
<ul class="slides" >
<li><img src='images/slideshows/image04.jpg' /></li>
<li><img src='images/slideshows/image06.jpg' /></li>
<li><img src='images/slideshows/image07.jpg' /></li>

</ul>
</div>

而且我不得不改变img和li的CSS以使其工作：

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slides img {width: 100%; display: block;}

对此：

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; background-color: #ffffff; text-align: center;} 
.flexslider .slides img {width: auto; display: inline;}

对我来说，我必须添加背景颜色，因为另一张幻灯片的一部分显示在左侧，而白色恰好与我的页面布局相匹配。

希望有所帮助。

Answer 2

在以下部分的flexslider.css文件中：

/* FlexSlider Necessary Styles*/ 

更改：

.flexslider .slides img {width: auto; display: block;}

对此：

.flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}

Answer 3

要在Flexslider中设置水平图像中心，只需在flexslider.css文件中进行更改，如下所示。

找到.flexslider .slides img并进行如下更改。

.flexslider .slides img {
  width: auto;
  display: block;
  margin: 0 auto;
}