1

Есть слайдер slick. Слайды с белым и черным фоном (реализованный через класс .black и .white).
Как сделать на jQuery, чтобы в момент когда был активен слайд, например с добавочным классом .black, менялся фон в меню сайта?

$('.slider').slick({
    arrows: false,
    autoplay: true,
    adaptiveHeight: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<nav>
    <ul>
        <li><a href="#">Main</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

<div class="slider">
    <div class="slide-item white"></div>
    <div class="slide-item black"></div>
</div>

2 ответа 2

1

Из задачи не ясно, на какой цвет вы хотите и как менять, но в целом для решения задачи можете использовать событие смены слайдов. Внутри проверять, цвет текущего слайда, и исходя из этого менять цвет меню.

Возможно, есть смысл смену фона меню сделать с css-анимацией, с той же продолжительностью, что и смена слайда. и менять цвет меню в beforeChange.

$('.slider').slick({
    arrows: false,
    autoplay: true,
    adaptiveHeight: true
});

$(".slider").on('afterChange', function(event, slick, currentSlide){
     var isBlack = slick.$slides.eq(currentSlide).hasClass('black');
     $("nav").toggleClass('black', isBlack)
             .toggleClass('white', !isBlack);
});
.slide-item { height : 50px; }

.white { }
.black { background-color: black; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>


<nav>
    <ul>
        <li><a href="#">Main</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

<div class="slider">
    <div class="slide-item white">white</div>
    <div class="slide-item black">black</div>
</div>

0

Вот очень абстрактное решение, не проверял, т к нужно создавать слик слайдер. И его можно и нужно оптимизировать.

if $('slider .slide-item.white').hasClass('active') {
  $('menu').hasClass('black');
  $('menu').removeClass('black');
  $('menu').addClass('white');
} else if $('slider .slide-item.black').hasClass('active') {
  $('menu').hasClass('white');
  $('menu').removeClass('white');
  $('menu').addClass('black');
}
.menu.black {
  background-color: black;
  
}

.menu.white {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul class="menu">
        <li><a href="#">Main</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

<div class="slider">
    <div class="slide-item white"></div>
    <div class="slide-item black"></div>
</div>

Ваш ответ

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

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