使用 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 值。