Switching address in src attribute when switching slick slides?

Question

JavaScript

Good evening!
A question.
There is a slick slider, when switching slides, the addresses in the src of pictures in another block should change.
The slide has an active class; the pictures in the block change part of the address.
For example "img/ch/1/alcantara/border/b1-1.png" for one active slide, "img/ch/22/alcantara/border/b1-1.png" for the next one.
there is a code that works when a button is clicked, how to change it so that everything works?

const links = document.querySelectorAll('.link');

document.querySelector('.wrapper').onclick = event => {
  const btn = event.target.closest('button');
  
  if (btn) {
  	[...links].forEach(link => {
    	const text = link.getAttribute('src').split('/');
      text[text.length - 1 - +btn.parentNode.dataset.value] = btn.className;

      link.src = text.join('/');
      console.log(link.src);
    })
  }
}

..........
Tell me please!
https://jsfiddle.net/qhfkw065/32/
link to the previous post https://toster.ru/answer?answer_id=1275180#comment...

Answer 1

For everything to work correctly, you should not follow the click on the block, but listen to the slick slider event, since it has kenwheeler.github.io/slick (at the very bottom of the events block). There is a convenient afterChange event that takes 3 arguments, this is a link to the slider, the number of the current slide and the number of the next one.

$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){
  // тут производим смену картинки
});