2

我从使用bjqs滑块（它的响应能力较差）切换到使用流行的FlexSlider。我修改了 bjqs 滑块以在屏幕中央显示“当前”图像，在当前图像之前和之后显示（部分）上一个和下一个图像。您可以在此处使用 bjqs 滑块查看我的实现，以了解我所追求的。

现在有了 FlexSlider，我想不出办法来做到这一点。图像向左浮动，因此“当前”图像位于容器的左侧。有人知道实现此目的的方法吗？

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

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

3 回答 3

6

在该部分下的 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;}
于 2013-05-30T00:02:51.067 回答
4

我只是遇到了同样的麻烦，答案就在 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;}

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

希望有帮助。

于 2013-04-25T17:43:11.243 回答
1

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

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

.flexslider .slides img {
  width: auto;
  display: block;
  margin: 0 auto;
}
于 2019-02-15T16:30:32.377 回答