How to make slick pagination unique?

Question

css

Greetings.
Tell me please. I made pagination on product cards.

function setProgress(index) {
    const calc = ((index + 1) / ($slider.slick('getSlick').slideCount)) * 100;

    $progressBar
      .css('background-size', `${calc}% 100%`)
      .attr('aria-valuenow', calc);

  }

  const $slider = $('.card-slider');
  const $progressBar = $('.progress');


  $slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    setProgress(nextSlide);
  });

  $slider.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 400,

  });

  setProgress(0);

But now it turns out when changing the slider, the pagination changes for the whole class. Hence on all cards on the page.
I do not understand how to make it isolated? that is, that the class was unique or an attribute how to transfer it?

Answer 1

appendDots:
  string
  $(element)
  Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)

dotsClass: 
  string
  'slick-dots'
  Class for slide indicator dots container

Answer 2

make a separate class for pagination, through the slick slider options

$slider.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 400,
   dotsClass: "customDotsClass"
  });

and style it