具有居中当前图像的 flexslider答案

【问题标题】：flexslider with centered current image具有居中当前图像的 flexslider
【发布时间】：2013-08-20 16:41:54
【问题描述】：

我正在尝试构建一个 Flexslider 轮播 - 它有多个图像，但当前图像居中，任一侧的下一个/上一个图像都在屏幕外 - 就像这个网站 http://www.ncad.ie/

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

看看这个声称可以解决它的其他问题，但我无法让它工作： FlexSlider: Center current image

曾尝试过其他的 flexslider JS，例如：

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

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

提前致谢 .ben.

【问题讨论】：

标签： jquery flexslider

【解决方案1】：

其实刚刚解决了:-)

这是最后一段： 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}

【讨论】：

【解决方案2】：

您可以添加一些 CSS 规则来更改滑块的外观并将导航器移动到滑块图像的边界之外。

代码：

.content {
    background: #f2f2f2;
    max-width: 800px;
    display: block;
    margin: 0 auto
}
.flex-direction-nav .flex-next {
    right: 0 !important;
    margin-right: -30px;
    opacity: 1 !important;
}
.flex-direction-nav .flex-prev {
    left: 0 !important;
    opacity: 1 !important;
    margin-left: -30px;
}
.flexslider {
    width: 90%;
    margin: 0 auto;
}

演示：http://jsfiddle.net/IrvinDominin/899SD/

【讨论】：

嗨 - 感谢您的回答 - 但我想要的是在当前图像旁边显示下一个/上一个图像（不是箭头），但只显示屏幕上的空间 -如：ncad.ie
不知道这个插件能不能用，我看看。最终你可以转移到另一个插件吗？
可能会移动到另一个，但 Flexslider 在滑动/响应大小等方面是最好的，并且有一个 Drupal 模块。就解决方案而言，Flexslider 的作者在这里提到了一个我尝试过的解决方案，它有点工作，只是它会创建水平滚动：github.com/woothemes/FlexSlider/issues/212