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

问题描述

我从使用 bjqs 滑块(它的响应能力较差)切换到使用流行的 FlexSlider.我修改了 bjqs 滑块以在屏幕中央显示当前"图像，在当前图像之前和之后显示(部分)上一个和下一个图像.您可以使用 bjqs 滑块 here 查看我的实现，了解我的目标.

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屋！