I looked through the entire slick-slider found a couple of functions like afterChange and beforeChange but I can’t figure it out, the point is that there is a slider with photos of people, so you need to transfer a photo to the background of the neighboring element when scrolling. that is, we have

<div class="slide__inner box-team slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" style="width: 1140px;" tabindex="-1" role="option" aria-describedby="slick-slide02"> <div class="col-xs-12 col-md-5 wrapper-box-image"> <div class="box-image" style="background: url({img}от сюда будем брать фото) no-repeat center center/cover"></div> </div> <div class="col-xs-12 col-md-7"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet culpa dolores dolorum in labore nisi optio ratione tempore velit voluptates! Commodi eos et, inventore ipsa iusto necessitatibus officia placeat voluptatem. </div> </div></div><div id="team_text" style="{img}тут должна быть картинка"></div>

In general, such an idea did not find an option how to make a sample of a picture and duplicate it into a block, who can tell. And the logic is that this element is not part of the slicka, it is far from it at all.

So far I could only think of this

 $('.slick-slider-gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide){ var img_bg = $(".box-image").attr("style"); $("#team_text").attr("style", img_bg); });

But now I can’t think how to hang an event on a slider so that when you click on next or prev, the bacground changes, in principle, it transfers everything.

  • Is Slider Syncing not suitable? Control from one slider to another slider - Sergey V.

1 answer 1

Solved the issue in this way.

 $('.slick-slider-gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide){ var img_bg = $('.box-team:eq('+ (nextSlide+1) +')').find(".box-image").attr("style"); console.log(img_bg, $("#team-text").length); $("#team-text").attr("style", img_bg); });