1

Привет! Есть слайдер-карусель, сделанный при помощи плагина slick. Потребовалось подкрутить его, чтобы при смене слайда автоматически менялся фон body. Не пойму пока, с какой стороны к этому подойти, подскажите, пожалуйста, может идеи у кого какие есть.

1
  • какой slick вы используйте покажите код?
    – L. Vadim
    20 фев 2017 в 7:08

2 ответа 2

1

Используйте 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

6
  • Cпасибо, но у меня почему-то не срабатывает. Я пытаюсь повторить вот это: codepen.io/EngCode/pen/PPJQER, только слайдер не на весь экран, а 50% ширины по центру. JS полностью такой же, как по ссылке, но вот хоть убей не работает смена фона, совсем мозг вскипел(
    – ucleacid
    20 фев 2017 в 7:45
  • покажите Ваш сеттинг код
    – ddeadlink
    20 фев 2017 в 8:08
  • codepen.io/lukas-pierce/pen/egwyXd 20 фев 2017 в 8:09
  • Дабы избежать ошибок в codepen в путях лучше не указывать протокол http, а писать без протокола <img src="//path">, это же правило касается скриптов и ссылок 20 фев 2017 в 8:12
  • @lukas-pierce Супер, сработало. Сутки спустя появилось еще два обстоятельства: фон должен быть градиентом и каждому из слайдов соответствует определенный цвет фона. Если с градиентом, в принципе, все понятно, то как выстроить код во втором случае? Коллбэк-функция меняет фон лишь при первом переключении. Еще раз прошу прощения за такие идиотские вопросы, впервые работаю с этим.
    – ucleacid
    21 фев 2017 в 2:40
0

Вопрос решен.

var backs = ['blue', 'yellow', 'red'];
$slider.on('afterChange', function(event, slick, index) {
    $('body').css('background-image', 'url(/img/back-' + backs[index] +   '.png)');
});

Ваш ответ

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

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