FlexSlider:居中当前图像

Tre*_*zel 2 jquery slider flexslider

我从使用bjqs滑块(它的响应能力是低于的)切换到使用流行的FlexSlider.我修改了bjqs滑块以显示屏幕中心的"当前"图像,并在当前图像之前和之后(部分)显示上一个和下一个图像.您可以在此处使用bjqs滑块查看我的实现,以了解我所追求的内容.

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

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

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 850,
  });
Run Code Online (Sandbox Code Playgroud)

小智 6

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

/* FlexSlider Necessary Styles*/ 
Run Code Online (Sandbox Code Playgroud)

更改:

.flexslider .slides img {width: auto; display: block;}
Run Code Online (Sandbox Code Playgroud)

对此:

.flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}
Run Code Online (Sandbox Code Playgroud)