Card Carousel Slider прокрутка ⇐ Javascript

[Anonymous]

Я создал ползунок карусели с функцией удара, а также с побочной навигацией. Но с боковой навигацией мне нужно прокрутить 2 карты за щелчок. А также с помощью странификации, хотя я с последним слайдом, лиц все еще находится на второй последней активной точке.document.addEventListener('DOMContentLoaded', () => {
const carousel = document.getElementById('promoCarousel');
if (!carousel) return;

const viewport = carousel.querySelector('.carousel-viewport');
const nextButton = carousel.querySelector('.carousel-nav.next');
const prevButton = carousel.querySelector('.carousel-nav.prev');
const cards = viewport.querySelectorAll('.card');

// --- JS-Powered Navigation for CSS Scroll Snap ---
function updateNavButtons() {
// Hide/show buttons based on scroll position
// A small tolerance is added to account for subpixel rendering
const tolerance = 2;
prevButton.style.display = viewport.scrollLeft = viewport.scrollWidth - tolerance;
nextButton.style.display = isAtEnd ? 'none' : 'flex';
}

function scrollCarousel(direction) {
// Find the width of the first card to determine the scroll amount
const cardWidth = cards.length > 0 ? cards[0].offsetWidth : 0;
const scrollAmount = (cardWidth + 12) * direction; // card width + margin
viewport.scrollBy({ left: scrollAmount, behavior: 'smooth' });
}

nextButton.addEventListener('click', () => scrollCarousel(1));
prevButton.addEventListener('click', () => scrollCarousel(-1));

// Update nav buttons on scroll, load, and resize
viewport.addEventListener('scroll', updateNavButtons);
window.addEventListener('resize', updateNavButtons);
updateNavButtons();

Скрипт страниц
const paginationContainer = document.getElementById('carouselPagination');
const cardsPerPage = () => {
const width = window.innerWidth;
if (width >= 992) return 3;
if (width >= 768) return 2;
return 1;
};

function createPagination() {
paginationContainer.innerHTML = ''; // Clear previous dots

cards.forEach((card, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
if (index === 0) dot.classList.add('active');
dot.dataset.index = index;
paginationContainer.appendChild(dot);

dot.addEventListener('click', () => {
const cardWidth = card.offsetWidth + 0; // card width + margin
const scrollAmount = cardWidth * index;
viewport.scrollTo({ left: scrollAmount, behavior: 'smooth' });
});
});
}

function updateActiveDot() {
const scrollLeft = viewport.scrollLeft;
const cardWidth = cards[0].offsetWidth + 12;

const index = Math.round(scrollLeft / cardWidth);
const dots = paginationContainer.querySelectorAll('.dot');

dots.forEach(dot => dot.classList.remove('active'));
if (dots[index]) dots[index].classList.add('active');
}

// Recreate pagination on load and resize
createPagination();
window.addEventListener('resize', () => {
createPagination();
updateActiveDot();
});

viewport.addEventListener('scroll', updateActiveDot);


Подробнее здесь: https://stackoverflow.com/questions/797 ... -scrolling