使用 Slick Slider 在 data-id 上显示和隐藏 Div

Question

我使用 UL 和 LI 创建了一个 Slick Slider，下面是代码：

 <ul class="slider">
     <li data-index="1">1</li>
     <li data-index="2">2</li>
     <li data-index="3">3</li>
     <li data-index="4">4</li>
     <li data-index="5">5</li>
  </ul>

设计看起来像这样

以下是 ul li 之后的部分：

<section class="contentYear" data-id="1"></section>
<section class="contentYear" data-id="2"></section>

我的要求是当 slick slider 更改为 2 时，应显示 data-id=2 的 contentYear。

我写了下面的代码，但没有成功

  $('.slider').on('afterChange', function(event, slick, currentSlide){  
        $('.contentYear').hide();
        $('.contentYear[data-id=' + (currentSlide + 1) + ']').show();
    });

有人能帮忙吗？ 我更喜欢使用光滑的 slider，如果没有可以建议我可以完成此操作的方法。

Answer 1

currentSlide 的值应该从哪里来？ 您必须以某种方式记住 slider 中显示的数字。

一个快速而肮脏的解决方案是使用一个全局变量来存储 currentSlide 值。