1

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

1
  • какой slick вы используйте покажите код?
    – L. Vadim
    Commented 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
    Commented 20 февр. 2017 в 7:45
  • покажите Ваш сеттинг код
    – ddeadlink
    Commented 20 февр. 2017 в 8:08
  • codepen.io/lukas-pierce/pen/egwyXd Commented 20 февр. 2017 в 8:09
  • Дабы избежать ошибок в codepen в путях лучше не указывать протокол http, а писать без протокола <img src="//path">, это же правило касается скриптов и ссылок Commented 20 февр. 2017 в 8:12
  • @lukas-pierce Супер, сработало. Сутки спустя появилось еще два обстоятельства: фон должен быть градиентом и каждому из слайдов соответствует определенный цвет фона. Если с градиентом, в принципе, все понятно, то как выстроить код во втором случае? Коллбэк-функция меняет фон лишь при первом переключении. Еще раз прошу прощения за такие идиотские вопросы, впервые работаю с этим.
    – ucleacid
    Commented 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)');
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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