带有当前图像居中的flexslider [英] flexslider with centered current image

问题描述

am正在尝试构建Flexslider轮播-具有多个图像，但当前图像居中，而任一侧的下一个/上一个图像不在屏幕上-就像此网站一样 http://www.ncad.ie/

am trying to build a Flexslider carousel - which has multiple images but the current image is centered, with the next/prev images to either side going off-screen - like this site http://www.ncad.ie/

到目前为止，我只有一张图像: http://jsfiddle.net/Y3kx5/

So far I've got it with a single image: http://jsfiddle.net/Y3kx5/

围绕这个问题声称可以解决它的其他问题，但我无法使其正常工作: FlexSlider:将当前图像居中

Lookign around other issues this one claims to solve it but I can't get it to work: FlexSlider: Center current image

尝试了其他flexslider JS，例如:

have tried other flexslider JS such as:

$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 800,
minItems: 3,
maxItems: 3
});

但是屏幕上有3张图像-而我只希望当前图像完全显示在屏幕上，而下一张/上一张仅显示窗口允许的数量.

but that 3 images on screen - whereas I want only the current one to be fully onscreen with the next/prev displaying only as much as the window allows.

先谢谢了 .ben.

推荐答案

实际上已经解决了:-)

Actually have just solved it :-)

这是最后一块: http://jsfiddle.net/Y3kx5/2/

使用CSS完成

.container {overflow: hidden; width: 100%}
.flexslider {max-width: 800px; width: 800px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}

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