Show & Hide Div on data-id using Slick Slider

Question

I have created a Slick Slider using UL & LI, below is the code:

 <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>

The design looks likes this

Below is the section after ul li:

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

My requirement is that when slick slider is changed to 2, the contentYear with data-id=2 should be displayed.

I have written below code, but NO success

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

Can anyone help with this? I prefer to use slick slider, if no can suggest something where I can get this done.

Answer 1

Where is the value of currentSlide supposed to come from? You have to somehow remember which number is showing in the slider.

A quick and dirty solution would be having a global variable in which you store the currentSlide Value.