将相同数量的图像保留在动态弹力流动器中

Question

您必须帮助我。我有几个小时的截止日期，我从来没有睡过，我在这里撕了头发。

看，这是我当前的项目

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/

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