无法让多个 Slick 轮播在单个页面上工作
Unable to get multiple Slick carousels to work on a single page
我在一个网站的单个页面上有三个轮播。其中两个使用相同的配置,因此当我使用以下代码时它们可以正常工作;
$('.carousel .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
我需要添加另一个显示更多项目的轮播,所以我给它一个唯一的 Id 并尝试添加以下代码;
$('#buildings-for-sale .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
问题是,只有 Javascript 中最先定义的旋转木马有效,不能同时使用两种不同的配置。
我尝试在 each() 循环中初始化每个滑块并使用数据标签进行必要的修改,虽然这使所有滑块都正确呈现,但显示四个元素的滑块不会滑动正确到下一组结果,它只是显示一个空白屏幕。这是我试过的代码;
$('.carousel .items').each(function(idx, item){
var slides = $(this).attr('data-slides');
if (!slides > 0) {
slides = 2;
}
console.log("Slides " + slides);
$(this).slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: slides,
slidesToScroll: slides,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
有人对我如何让它工作有任何建议吗?
阅读您的评论后,最简单的方法可能是从第一个函数调用中排除第三个轮播:
$('.carousel:not(#buildings-for-sale) .items').slick({
我在一个网站的单个页面上有三个轮播。其中两个使用相同的配置,因此当我使用以下代码时它们可以正常工作;
$('.carousel .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
我需要添加另一个显示更多项目的轮播,所以我给它一个唯一的 Id 并尝试添加以下代码;
$('#buildings-for-sale .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
问题是,只有 Javascript 中最先定义的旋转木马有效,不能同时使用两种不同的配置。
我尝试在 each() 循环中初始化每个滑块并使用数据标签进行必要的修改,虽然这使所有滑块都正确呈现,但显示四个元素的滑块不会滑动正确到下一组结果,它只是显示一个空白屏幕。这是我试过的代码;
$('.carousel .items').each(function(idx, item){
var slides = $(this).attr('data-slides');
if (!slides > 0) {
slides = 2;
}
console.log("Slides " + slides);
$(this).slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: slides,
slidesToScroll: slides,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
有人对我如何让它工作有任何建议吗?
阅读您的评论后,最简单的方法可能是从第一个函数调用中排除第三个轮播:
$('.carousel:not(#buildings-for-sale) .items').slick({