1

Есть slick-slider, хочу сделать смену фона у главного контейнера при смене слайдера, завязанный на hasClass('slick-current'), добился только смены фона при hasClass у первого слайдера, если дальше листать, то цвет фона не меняется динамически с присваиванием класса .slick-current другому активному слайдеру.

$(document).ready(function() {
  if ($("#slide-1").hasClass("slick-current")) {
    $('.content').css("background-color", "yellow")
  }
  if ($("#slide-2").hasClass("slick-current")) {
    $('.content').css("background-color", "green")
  }
  if ($("#slide-3").hasClass("slick-current")) {
    $('.content').css("background-color", "red")
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-container">
  <div class="single-item">
    <div class="slick-slide " id="slide-1" data-slick-index="0">
      <h3>1</h3>
    </div>
    <div class="slick-slide slide-2" id="slide-2" data-slick-index="1">
      <h3>2</h3>
    </div>
    <div class="slick-slide slide-3" id="slide-3" data-slick-index="2">
      <h3>3</h3>
    </div>

  </div>
</div>

7
  • а вы уверены, что у вас класс slick-current добавляется к другим элементам при прокрутке слайдера? 28 сен 2017 в 9:21
  • Да, slick-current - это класс активного в данный момент на экране элемента слайдера. Так же добавляется slick-active, но сути это не меняет. 28 сен 2017 в 9:23
  • ваш код отрабатывает один раз, при загрузке страницы. Вам нужно его в обработчик засунуть. 28 сен 2017 в 9:25
  • Подскажите? а то не особо силен в этом. 28 сен 2017 в 9:26
  • код, где переключаеютс слайды для этого нужен 28 сен 2017 в 9:30

1 ответ 1

2

Исходя из комментария ваш код должен выглядить примерно так.

$('.content').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if($("#slide1").hasClass("slick-current")){
    $('.content').css("background-color", "yellow") 
  } 
  
  if($("#slide-2").hasClass("slick-current")){
    $('.content').css("background-color", "green") 
  } 
  
  if($("#slide-3").hasClass("slick-current")){
    $('.content').css("background-color", "red") 
  }
});

Чтобы дать первому слайдеру сразу фон

$(function() {
  if($("#slide1").hasClass("slick-current")){
    $('.content').css("background-color", "yellow");
  } 
});

Кстати можно было бы решить данную задачу с помощью css

#slide1.slick-current {
  background-color: yellow;
}

#slide-2.slick-current {
  background-color: green;
}

#slide-3.slick-current {
  background-color: red;
}

3
  • Все работает, только вопрос еще один возник, слайдер 1 активен при загрузке страницу, но фон к нему подключается не сразу, а только на втором круге, как дать первому слайдеру сразу при загрузке, нужный фон? 28 сен 2017 в 9:42
  • @MaximVolkov обновил ответ 28 сен 2017 в 9:48
  • Не срабатывает задать фон первому при загрузке страницы :( 28 сен 2017 в 9:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.