Slick Carousel 首尾项隐藏内容显示功能失效问题求助

问题根因 #

• 开启infinite: true无限滚动模式时，Slick会自动在原始幻灯片前后生成克隆节点实现无缝滚动效果，直接通过DOM获取.slick-item索引、绑定点击事件会受到克隆节点干扰，首末项索引匹配错误导致显隐失效
• 原有响应式配置格式不符合Slick规范，响应式断点不会生效

修改后完整代码 #

JavaScript代码 #

$('.slick-wrap').slick({
    dots: false,
    focusOnSelect: true,
    infinite: true,
    arrows: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '30px',
    // 修正响应式配置格式，符合Slick官方规范
    responsive: [
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

// 统一处理内容显隐逻辑
function updateContVisibility(currentIndex) {
    const carouselTexts = $(".slick-item .cont-hide");
    carouselTexts.css('visibility', 'hidden');
    carouselTexts.eq(currentIndex).css('visibility', 'visible');
}

// 初始化时显隐处理
$('.slick-wrap').on('init', function(event, slick){
    updateContVisibility(slick.currentSlide);
});

// 轮播切换完成后处理显隐，Slick内部已处理克隆节点索引映射，拿到的currentSlide是原始节点的正确索引
$('.slick-wrap').on('afterChange', function(event, slick, currentSlide){
    updateContVisibility(currentSlide);
});

原有CSS、HTML代码无需修改即可正常运行。

修改说明 #

1. 移除了直接绑定在.slick-item上的点击事件，改用Slick自带的afterChange事件监听轮播切换，避免克隆节点干扰
2. 所有索引直接从Slick实例的currentSlide属性获取，该值已经自动处理了克隆节点的映射，永远对应原始幻灯片的正确索引
3. 修正了响应式断点的配置格式，适配Slick官方规范，小屏幕下的展示规则可以正常生效

内容的提问来源于stack exchange，提问作者Evelyn