Блог

Главная - Вопросы по программированию - Показывать и скрывать Div в идентификаторе данных с помощью скользкого ползунка

Показывать и скрывать Div в идентификаторе данных с помощью скользкого ползунка

#javascript #jquery #slider #slick.js

#javascript #jquery ( jquery ) #слайдер #slick.js

Вопрос:

Я создал скользкий слайдер, используя UL и LI, ниже приведен код:

  <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 на 2 должен отображаться contentYear с data-id=2.

Я написал приведенный ниже код, но безуспешно

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

Кто-нибудь может помочь с этим? Я предпочитаю использовать slick slider, если никто не может предложить что-то, где я могу это сделать.

Комментарии:

1. Я пытался if($(‘div’).hasClass(‘slick-active’)){ console.log($(this).parent().find(‘li’).attr(‘data-index’); } Но он возвращает undefined

2. Проверьте этот рабочий код.

Ответ №1:

Откуда должно исходить значение currentSlide? Вы должны каким-то образом запомнить, какое число отображается в слайдере.

Быстрым и грязным решением было бы иметь глобальную переменную, в которой вы храните значение currentSlide.