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语句：

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/

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

1 个答案: