jQuery:转盘的媒体查询

jQuery: media queries for carousel

本文关键字：媒体 查询 jQuery      更新时间：2023-09-26

我想知道是否有解决方案，但似乎无法解决，我正在寻找与媒体查询等效的jQuery，以更改我设置的旋转木马的功能
代码很简单：

$(window).load(function () {
    $(function () {
        $(".events-slider").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            scroll: 3,
            speed: 800
        });
    });
});

但我已经设置了一些css媒体查询，在900px时，.event-slider的大小会减小，因此现在只显示1张幻灯片，与3并列，因此我想更改jQuery函数来反映这一点，即当浏览器窗口缩小到900px以下时，如果可能的话，scroll: 3,属性会变为scroll: 1,？如有任何建议，我们将不胜感激！

您可以在$（window）上使用jQuery.width（）函数来查找浏览器视口的宽度，类似于此线程的解决方案：

jQuery：如何实时检测窗口宽度？

$(document).ready(function() {
var window = $(window);
function checkWindowWidth() {
    var windowsize = window.width();
    if (windowsize > 900) {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 3,
                speed: 800
            });
        });
    } else {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 1,
                speed: 800
            });
        });
    }
}
checkWindowWidth();
$(window).resize(checkWidth);
});
相关文章：