Javascript jQuery:carousel的媒体查询
我想知道是否有解决方案,但似乎无法解决,我正在寻找与媒体查询相当的jQuery,以更改我已设置的转盘的功能Javascript jQuery:carousel的媒体查询,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想知道是否有解决方案,但似乎无法解决,我正在寻找与媒体查询相当的jQuery,以更改我已设置的转盘的功能 代码非常简单: $(window).load(function () { $(function () { $(".events-slider").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", scroll: 3,
代码非常简单:
$(window).load(function () {
$(function () {
$(".events-slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
scroll: 3,
speed: 800
});
});
});
但是我设置了一些css媒体查询,在
900px
处事件滑块缩小,因此现在只显示1张幻灯片,而不是3张幻灯片,因此我想更改jQuery函数以反映这一点,即当浏览器窗口缩小到900px
以下时,滚动:3,
属性更改为滚动:1,
如果可能的话?如有任何建议,将不胜感激 您可以使用$(window)上的jQuery.width()函数来查找浏览器视口的宽度,类似于此线程的解决方案:
$(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);
});