The idea is this: there is a slider that changes backgroung-image in 3 seconds and after 3 seconds, it goes to the next slide. As a result, we get for example 3 slides and 6 backgrounds (2 backgrounds for each slide). Kick where to dig.

background - 3 sec / background - 3 sec / scroll next

This is another question: is it better to change the background image one for another or change the image to the picture <img> ?

I just can’t figure out where I’m going to display the images so that I can manage them by js

    1 answer 1

    I did not use this library, but following the documentation I will assume what can be done like this:

     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); });

    The display time of one slide is 6 seconds. After switching the slide, we create a 3-second interval with the function and in this function we change the background. Before switching the slide, we clear the old one, but do not set a new interval, so we still have unaccounted time for switching.

    And run another interval at the start of the gallery.