Один скрипт для нескольких слайдеров
 

Есть несколько одинаковых слайдеров карточек на сайте
https://viacheslavdemchenko.github.io/miushi_lp/
Попытался написать один общий скрипт для них, чтобы не писать под каждый слайдер отдельный. Но что-то не так все получилось, как хотелось. Понимаю, что есть ошибка с точками и слайдерами, но не могу понять, как правильно сделать. Кроме того, на первый взгляд все слайдеры нормально отрабатывают по клику на стрелки, но если нажать, например, два клика на одном, а потом на другом, то следующий начинает отрабатывать так, как будто кликали по нему (то есть как-будто у него ужа 2 слайда пролистали и он в текущий момент листает третий). Это касается и точек.
Скрипт слайдеров https://github.com/ViacheslavDemchen...ousel-cards.js

DVV,
строки 4 - 11 скрипта перенесите в цикл, заменив document на item.

DVV,

;(function () {

    let cardLists = document.querySelectorAll('.carousel'); // Список всех списков (слайдеров) карточек


    /* ПЕРЕБОР СПИСКА ВСЕХ СПИСКОВ (СЛАЙДЕРОВ) КАРТОЧЕК */
    cardLists.forEach( (item, index) => {
    let ul = item.querySelector('.card-list'),
        cards = item.querySelectorAll('.card-item'), // Список карточек внутри каждого слайдера
        dotsLists = item.querySelectorAll('.dots__item'), // Список всех списков точек
        prev = item.querySelector('.prev'), // Кнопка назад
        next = item.querySelector('.next'), // Кнопка вперед
        cardWidth = cards[0].scrollWidth + 29, // Ширина карточки
        cardCount = 4, // Количество карточек, листаемых за один клик
        position = 0, // Текущий сдвиг влево
        activeDot = 0; // Текущая активная точка
        function setDot(num)
        {
           dotsLists[activeDot].classList.remove('dots__item--active');
           activeDot = (dotsLists.length + activeDot + num) % dotsLists.length;
           dotsLists[activeDot].classList.add('dots__item--active');
           move(activeDot)
        }

        function move(num)
        {
           num = Math.min(num * cardCount, cards.length - cardCount);
           position = -num * cardWidth;
           ul.style.marginLeft = `${position}px`;
        }


        prev.addEventListener('click', () => {
            setDot(-1)
        });


        next.addEventListener('click', () => {
            setDot(1)
        });
    });




})();

Все заработало. Спасибо большое!!!)