Question

我有一个幻灯片脚本，您可以在其中设置可见图像的数量，并在达到浏览器大小时需要更改ammount。

当浏览器宽度小于768px时显示4项。这可以合并到2个以下的脚本吗？

滑块脚本：

$('.logo-slide').wmuSlider({
    touch: Modernizr.touch,
    animation: 'slide',
    items: 5
});

浏览器宽度脚本：

$(window).resize(function() {
    if ($(window).width() < 767) {
        $(".nav-wide").hide();
    }
    else {
        $(".nav-wide").show();
    }
});

我尝试将这些内容组合在一起，但不起作用

$(window).resize(function() {
    if ($(window).width() < 768) {
        $('.logo-slide').wmuSlider({
            items: 4
        });
    }
    else {
        $('.logo-slide').wmuSlider({
            items: 5
        });
    }
});

Answer 1

您的window.width和resize方法可用于检测不同的屏幕尺寸。

jquery插件可能只在页面加载时调用一次。

这样的插件可能是一个更好的选择，你可以有最小和最大的项目编号？

http://www.woothemes.com/flexslider/（参见// Carousel Options minItems和maxItems）

Answer 2

尝试CSS3



    @media screen and (max-width: 767px) {
        .logo-slide { display: none; }
    }

滑块脚本在调整大小时显示不同数量的项目

2 个答案: