如何实现Slick轮播切换时同步显示对应data-legend属性内容？

我是JavaScript初学者，使用Slick制作了一个轮播组件，每个轮播项带有data-legend属性，希望在切换上一个/下一个轮播时，同步显示对应轮播项的该属性值。目前我的代码仅能显示第一个轮播项的data-legend值，现有HTML和JS代码如下，请问是否需要使用循环或点击事件？该如何改进代码？

现有HTML代码 #

<div class="carousel2partsUp slick-initialized slick-slider">
  <div class="el-carousel2parts slick-slide slick-current slick-active" data-legend="legend1">
{#    Content #}
</div>
  <div class="el-carousel2parts slick-slide" data-legend="legend2">{#    Content #}</div>
  <div class="el-carousel2parts slick-slide" data-legend="legend3">{#    Content #}</div>
  <div class="el-carousel2parts slick-slide" data-legend="legend4">{#    Content #}</div>
</div>
<span id="legend"></span>

现有JS代码 #

<script>
  var carousel = document.querySelector('.el-carousel2parts');
  var spanLegend = document.querySelector('#legend');
  var dataLegend = carousel.dataset.legend;
  spanLegend.innerHTML = dataLegend;
</script>

不需要手动加循环或点击事件，Slick轮播本身提供了切换完成的回调事件，直接利用这个事件就能同步更新图例文本。

改进步骤： #

1. 绑定Slick的afterChange事件：这个事件会在轮播切换完成后触发，此时可以获取当前激活的轮播项，提取它的data-legend值并更新到目标<span>中。
2. 修正初始值获取逻辑：原来的代码只取了第一个匹配.el-carousel2parts的元素，应该获取带有slick-current类的初始激活轮播项来设置初始图例。

完整改进后的JS代码 #

<script>
  // 初始化Slick轮播（若已初始化可跳过此部分，保留事件绑定即可）
  $('.carousel2partsUp').slick({
    // 这里添加你的Slick配置，比如是否显示箭头、圆点等
    arrows: true,
    dots: false
  }).on('afterChange', function(event, slick, currentSlide) {
    // 获取当前激活的轮播项DOM元素
    var activeSlide = slick.$slides[currentSlide];
    // 提取data-legend属性值
    var legendText = activeSlide.getAttribute('data-legend');
    // 更新到span中（用textContent更安全，避免HTML注入风险）
    document.querySelector('#legend').textContent = legendText;
  });

  // 设置页面加载时的初始图例
  var initialActiveSlide = document.querySelector('.el-carousel2parts.slick-current');
  document.querySelector('#legend').textContent = initialActiveSlide.getAttribute('data-legend');
</script>

关键说明： #

• afterChange事件的currentSlide参数是当前激活轮播项的索引（从0开始），slick.$slides是所有轮播项的DOM元素集合。
• 优先使用textContent而非innerHTML，因为图例文本不需要解析HTML，更安全。
• 若你的Slick轮播已经完成初始化，只需单独绑定afterChange事件即可，无需重复初始化。

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