Как сделать пагинацию slick уникальной?

Question

[Jussss92]

Приветствую.
Подскажите пожалуйста. Я сделал пагинацию на карточки товаров.

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);

Но теперь получается при смене слайдера пагинация меняется всему классу. Следовательно на всех карточках на странице.
Не пойму как сделать это изолированным? тоесть чтобы класс был уникальный или атрибут как то передавать?

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

[Spisoktem]

сделайте для пагинации отдельный класс, через опции slick slider-а

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

и для него задавайте стили