Привет! Есть слайдер-карусель, сделанный при помощи плагина slick. Потребовалось подкрутить его, чтобы при смене слайда автоматически менялся фон body. Не пойму пока, с какой стороны к этому подойти, подскажите, пожалуйста, может идеи у кого какие есть.
2 ответа
Используйте callback-функцию afterChange
$(document).ready(function() {
var $slider = $(".Modern-Slider").slick({
//your params here
});
//add callback
$slider.on('afterChange', function(){
alert('afterChange');
});
});
Ссылка на рабочий пример: https://codepen.io/lukas-pierce/pen/egwyXd
-
Cпасибо, но у меня почему-то не срабатывает. Я пытаюсь повторить вот это: codepen.io/EngCode/pen/PPJQER, только слайдер не на весь экран, а 50% ширины по центру. JS полностью такой же, как по ссылке, но вот хоть убей не работает смена фона, совсем мозг вскипел(– ucleacidCommented 20 февр. 2017 в 7:45
-
-
-
Дабы избежать ошибок в codepen в путях лучше не указывать протокол
http
, а писать без протокола<img src="//path">
, это же правило касается скриптов и ссылок Commented 20 февр. 2017 в 8:12 -
@lukas-pierce Супер, сработало. Сутки спустя появилось еще два обстоятельства: фон должен быть градиентом и каждому из слайдов соответствует определенный цвет фона. Если с градиентом, в принципе, все понятно, то как выстроить код во втором случае? Коллбэк-функция меняет фон лишь при первом переключении. Еще раз прошу прощения за такие идиотские вопросы, впервые работаю с этим.– ucleacidCommented 21 февр. 2017 в 2:40
Вопрос решен.
var backs = ['blue', 'yellow', 'red'];
$slider.on('afterChange', function(event, slick, index) {
$('body').css('background-image', 'url(/img/back-' + backs[index] + '.png)');
});