Question

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

现在使用FlexSlider，我无法找到实现此目的的方法。图像向左浮动，因此“当前”图像定位在容器的左侧。有人知道实现这个目标的方法吗？

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

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

Answer 1

在下面的部分：

下的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 2

我遇到了同样的麻烦，答案就在于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 3

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

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

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

FlexSlider：居中当前图像

3 个答案: