[рони]

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




})();