FlexSlider:将当前图像居中 [英] FlexSlider: Center current image

问题描述

我从使用 bjqs 滑块(它的响应速度低于标准)切换为使用流行的 FlexSlider .我修改了bjqs滑块，以在屏幕上居中显示当前"图像，并在当前图像之前和之后(部分)显示了上一个和下一个图像.您可以在此处上使用bjqs滑块查看我的实施情况，以了解我的追求.

I switched from using the bjqs slider (it's responsiveness was subpar) to using the popular FlexSlider. I had modified the bjqs slider to display the "current" image centered on the screen, with the previous and next images displayed (partially) before and after the current image. You can see my implementation using the bjqs slider here to get an idea for what I'm after.

现在有了FlexSlider，我还不太想办法做到这一点.这些图像向左浮动，因此当前"图像位于容器的左侧.有人知道实现此目标的方法吗?

Now with the FlexSlider, I can't quite figure out a way to do this. The images are floated left, so the "current" image gets positioned to the left side of the container. Anybody know a way to accomplish this?

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

Right now I'm just using the default styles and markup for FlexSlider, with the following javascript:

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

推荐答案

我也遇到了同样的麻烦，答案就在CSS中.

I just had this same trouble and the answer lies in the CSS.

我的HTML格式是这样的:

My HTML format is like this :

<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才能从此工作:

And I had to change the CSS for the img and the li to make it work from this:

.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;}

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

For me I had to add the background color because part of another slide was showing up on the left, and the white just matches my page layout.

希望有帮助.

这篇关于FlexSlider:将当前图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！