Changing address in src 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?
They suggested using the afterChange slick event, but it doesn’t work, I can’t understand ..
please tell me.
code that works when the button is clicked

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/