Slick JS有问题。我必须将一个活动项目作为第二行居中，但它会自动作为第三行居中。
jQuery(document).ready(function($) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
centerMode: true,
responsive: [{
breakpoint: 800,
settings: {
arrows: false,
},
}, ]
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
variableWidth: false,
autoplay: true,
autoplaySpeed: 5000,
speed: 1000,
responsive: [{
breakpoint: 800,
settings: {
slidesToShow: 1,
},
}, ]
});
})我试了很多次在互联网上寻找任何解决方案，但我所有的尝试都失败了🥺
第一个
1条答案
按热度按时间0s7z1bwu1#
Slick 将 所有 可见 项目 居中 ， 而 不仅仅 是 活动 项目 。 因此 ， 它 足以 显示 数量 不 均匀 的 幻灯 片 ， 如 3 或 5 张 。
如果 不能 这样 做 ， 可以 使用 CSS 将
slick-track向 左 移动 ， 使用 负margin-left。 边距 大小 必须 是 幻灯 片 的 一半 。 因为 您 需要 4 张 幻灯 片 ， 幻灯 片 的 一半 是 轨道 宽度 的 第 8 部分 ， 即12,5%：中 的 每 一 个
第 一 个