flexslider - 当宽度为 768px 时，Flexslider 轮播显示两个图像

Question

问题 我使用 flexslider 轮播来显示多个图像。我现在想要的是，当浏览器有一定的宽度时会出现中断，例如 768px 附带显示 2 个图像。目前，您看到的图像宽度只有一半，并且希望使用 javascript/jquery 对这些点提供许多必须完全显示的图片。

所以我的问题是，当浏览器宽度为例如 768px 宽度时，我如何做出 if 语句，是否必须显示两个图像......

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 320,
    itemMargin: 0,
    minItems: 2,
    maxItems: 5,
    start: function(slider){
        $('body').removeClass('loading');
    }
});

检查JSFiddle上的代码

Answer 1

您可以对宽度使用 if 语句，如下所示：

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

...并包含它，您可能希望将文档就绪功能与窗口调整大小功能结合起来。

$(document).ready(myfunction);
$(window).resize(myfunction);

function myfunction() {
    // Pace the if/else here, do whatever
}

在显示两个图像方面，它认为您应该能够通过在 flexslider 函数中设置幻灯片宽度和偏移量 - 或使用 css 来实现。这是我正在谈论的选项：

itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2 

这是您的 JS 小提琴演示的编辑版本！http://jsfiddle.net/tM2a8/