Смена фона при прокрутке слайдера
295
16 января 2018, 11:17
Есть слайдер 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>Answer 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/slick@1.8.1/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/slick@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/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>Answer 2
Вот очень абстрактное решение, не проверял, т к нужно создавать слик слайдер. И его можно и нужно оптимизировать.
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>
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23726 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
© "hostciti.net" 26.1.2025 | 11:43