在动态flexslider中保留相同数量的图像

Question

你必须帮助我。我有一个几个小时的截止日期，我没有睡多年，我在这里撕开我的头发。

看，这是我的current project

的CSS：

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

脚本：

        // flexslider
        $('.flexslider').flexslider({   
            animation: "slide",
            animationLoop: true,
            itemWidth: 410,
            itemMargin: 5,
            minItems: 1,
            maxItems: 1
        });

基本上，在移动视口中我希望1个项目居中且可见，但在更高的视口上我想要3.当窗口改变大小时，我可以用代码调整上面的参数。那不是问题。

问题是当您调整浏览器大小时，flexslider会如何崩溃（尽管名称不同）。我想要显示的一个英雄形象可能会显示半个半关闭另一个图像或根本不显示。令人愤怒，不一致的结果。

请帮助，我希望在下部视口中有一个图像死点，并且在较高视口上有三个图像死点。

Answer 1

删除

itemWidth: 410,
itemMargin: 5,

从你的脚本

尝试。

Answer 2

如果您使用多个项目：

itemWidth: $('.flexslider').width()/4

这里我将FlexSlider的总宽度除以项目数。 http://jsfiddle.net/Y3kx5/53/

这可能不是最好的解决方案，但我相信它会对你有用。