Why does Slick slider toggle all sliders on the page?

Question

JavaScript

Hello. Why might this be?
texenergo21.pr-ff.ru/category.php if you switch to a tile (click here)

On other pages, everything is fine, when I initialize in a card, it switches only in 1 card.
And here for some reason all the sliders at once.
The code is like this:

$('.three-sub-slider').slick({
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    vertical: true,
    asNavFor: ".cart-items-three-slider",
  })
  $('.cart-items-three-slider').slick({
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: ".three-sub-slider",
  })
  $('#item-grid').click((e)=> {
    console.log(e.target)
    setTimeout(()=> {
      $(".cart-items-three-slider").slick('reinit');
      $(".three-sub-slider").slick('reinit');
    },200)


  })

have to be initialized. when switching tabs it does not work

Answer 1

Along the way, ".three-sub-slider" has the same class for all product cards.
Maybe try to personalize the slider id? For example, sew the product id into it in order to get the string $('#item-grid-(product ID)').click((e)=>
And yes, with jQ 3.5.1 the asNavFor parameter works, frankly speaking , not ice.