@colddave

Как настроить активные классы в slick?

$('.items').slick({
    dots: true,
    appendDots:$(".controls"),
    arrows:false,
    speed: 700,
    responsive:true,
    adaptiveHeight:true,
    touchThreshold:5
  });
$('.slick-dots').slick({
    dots: false,
    infinite: false,
    speed: 700,
    slidesToShow: 6,
    slidesToScroll: 6,
    responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
  });


У меня точки слайдера slick находятся в другом слайдере slick, и отображаются по 5.
Получается так, что при загрузке страницы, и при смене слайдов - точек
они все подсвечиваются как активные, а мне нужно чтобы подсвечивалась только одна активная точка, которая относится к слайду.
Это из - за того, что видимым слайдам(в данном случае точкам в видимой области) присваивается класс slick - active, он же и является классом для активных точек.
Можно просто удалять этот класс в afterChange у точек, но как подсветить активный?
Как обратиться к переменной currentSlide общего слайдера, для того, чтобы использовать ее в afterChange слайдера точек?
Или какие еще есть решения?
  • Вопрос задан
  • 984 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы