new era •
new season •
same thrilling racing •

(function () {
const DESKTOP_CARDS_PER_PAGE = 3;
const MOBILE_CARDS_PER_PAGE = 1;
const MOBILE_BREAKPOINT = 600;

const track = document.getElementById(‘driverTrack’);
const prevBtn = document.getElementById(‘driverPrev’);
const nextBtn = document.getElementById(‘driverNext’);
const dotsWrap = document.getElementById(‘driverDots’);

const cards = Array.from(track.children);
const total = cards.length;

let current = 0;
let cardsPerPage = DESKTOP_CARDS_PER_PAGE;
let pages = Math.ceil(total / cardsPerPage);

function buildDots() {
dotsWrap.innerHTML = ”;
for (let i = 0; i goTo(i));
dotsWrap.appendChild(dot);
}
}

function getCardWidth() {
if (!cards[0]) return 284;
const style = getComputedStyle(track);
const gap = parseFloat(style.gap) || 24;
return cards[0].offsetWidth + gap;
}

function goTo(page) {
current = Math.max(0, Math.min(page, pages – 1));
const offset = current * cardsPerPage * getCardWidth();
track.style.transform = ‘translateX(-‘ + offset + ‘px)’;

prevBtn.disabled = current === 0;
nextBtn.disabled = current === pages – 1;

dotsWrap.querySelectorAll(‘.driver-carousel__dot’).forEach((d, i) => {
d.classList.toggle(‘active’, i === current);
});
}

function updateLayout() {
const width = window.innerWidth;
cardsPerPage = width goTo(current – 1));
nextBtn.addEventListener(‘click’, () => goTo(current + 1));
window.addEventListener(‘resize’, updateLayout);

updateLayout();
})();