对于低于一定分辨率(768px)的屏幕，我在移除光滑的carsel时遇到了麻烦。这是我正在使用的代码(我在Stack overflow上找到它)。问题是，添加这段代码后，我的光滑的carosel根本不会显示。
$slickGreen = false;
function greenSlider(){
if($(window).width() > 768){
if(!$slickGreen){
$('#book-carosel').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
});
$slickGreen = true;
}
} else if($(window).width() < 767){
if($slickGreen){
$('#book-carosel').slick('unslick');
$slickGreen = false;
}
}
};
});
$(document).ready(function(){
....
greenSlider();
});
$(window).on('resize', function(){
....
greenSlider();
});
显示carsel的原始代码如下:
$(document).ready(function(){
$('#book-carosel').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
});
任何帮助都将非常感激。
如果这对某人有帮助，我终于想出了如何做到这一点。我使用的所有代码都在下面。注意:我使用了XML字符，因为我使用的是Blogger模板，它不允许'或>& lt;迹象。
$(document).ready(function() {
// This will fire when document is ready:
$(window).on('resize', function(){
// This will fire each time the window is resized:
if($(window).width() >= 1024) {
// if larger or equal
$('#book-carosel').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
} else if ($(window).width() >= 800) {
// if smaller
$('#book-carosel').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
} else if ($(window).width() >= 600) {
// if smaller
$('#book-carosel').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
} else if ($(window).width() >= 300) {
// if smaller
$('#book-carosel').slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
infinite:true
}).show();
} else {
// block of code to be executed if the condition1 is false and condition2 is false
$('#book-carosel').unslick();
}
}).resize(); // This will simulate a resize to trigger the initial run.
});