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