Как задать в JS условие вывода определенного блока в зависимости от активного пункта слайдера?

Question

[pashabomber]

Добрый день!

Помогите, пожалуйста, решить задачу.
На странице есть слайдер (kenwheeler.github.io/slick)
В слайдере четыре слайда. У активного слайда идет класс slick-active. Также каждому слайду задан класс slide1, slide2 и т.д. То есть, если второй слайд активен, то у него class="slide2 slick-active".

Под слайдером выведены четыре блока с классами - block1, block2, block3, block4. Все они скрыты через добавление класса hidden.
Задача в следующем. Как-то задать условие, чтобы если первый слайд (slide1) активен (с классом slick-active), чтобы у нижнего блока block1 убирался класс hidden и он соответственно становился видимым. Как итог - прокручиваем слайдер - становится видимым следующий блок.

Заранее спасибо за помощь!

Answer 1

[Сергей Тутуков]

Там же есть в примерах такой вариант:

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});