Необычный слайдер на базе Slick

318

28 апреля 2017, 19:19

Задумка такая: есть слайдер, у которого через 3 сек меняется backgroung-image и еще через 3 сек происходит переход на следующий слайд. В итоге мы получаем к примеру 3 слайда и 6 фонов (по 2 фона на каждый слайд). Пните куда копать.

фон - 3 сек / фон - 3 сек / scroll next

Такой еще вопрос, что лучше менять фоновое изображение одно на другое или менять картинку на картинку <img>?

Я просто не могу сообразить пока куда мне выводить изображения, чтоб потом js'ом ими управлять

Answer 1

Не использовал эту библиотеку, но следуя документации предположу что можно сделать так:

var currentInterval = 0;
var getBackground = function () {};
$('.your-element').slick({ autoplaySpeed: 6000 })
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if (currentInterval) {
        clearInterval(currentInterval);
    }
});
$('.your-element').on('afterChange', function(event, slick, currentSlide) {
    currentInterval = setInterval(function() {
        getBackground();
    }, 3000);
});

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

И запускаем еще один интервал при старте галереи.