Slick Carousel配置appendDots到slide内时丢失slick-active类问题

问题原因 #

Slick Carousel 内置的appendDots配置仅支持维护单份指示点（dots）的状态同步：当你传入的选择器$('.appenddots')匹配到多个DOM节点（每个slide内对应一个节点）时，Slick会在初始化阶段为所有匹配节点生成完整的dots结构，但内部的激活状态更新逻辑仅会修改第一份dots的slick-active类，其余slide内的dots状态不会被自动同步，就会出现只有第一个slide内指示点有激活标记的问题。

修复方案 #

保留原有appendDots配置的基础上，通过监听Slick的轮播事件手动同步状态即可：

1. 状态同步逻辑 #

监听轮播切换完成事件，统一更新所有指示点的激活状态：

// 替换为你实际使用的轮播容器选择器
$('.carousel-container').on('afterChange', function(event, slick, currentSlide) {
  // 移除所有指示点的激活类
  $('.appenddots .slick-dots li').removeClass('slick-active');
  // 为每一组指示点的对应索引节点添加激活类
  $('.appenddots .slick-dots').each(function() {
    $(this).find('li').eq(currentSlide).addClass('slick-active');
  });
});

2. （可选）点击跳转逻辑 #

Slick默认仅会为第一组指示点绑定点击切换轮播的事件，如果需要所有slide内的指示点都支持点击跳转，可以补充如下事件委托：

$(document).on('click', '.appenddots .slick-dots li', function() {
  const targetSlideIndex = $(this).index();
  // 替换为你实际使用的轮播容器选择器
  $('.carousel-container').slick('slickGoTo', targetSlideIndex);
});

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