scripts.js

const prevButton = document.getElementById('prev')
const nextButton = document.getElementById('next')
const items = document.querySelectorAll('.item')
const dots = document.querySelectorAll('.dot')
const numberIndicator = document.querySelector('.numbers')
const list = document.querySelector('.list')

let active = 0
const total = items.length
let timer

function update(direction) {
    const activeItem = document.querySelector('.item.active')
    const activeDot = document.querySelector('.dot.active')

    if (activeItem) activeItem.classList.remove('active')
    if (activeDot) activeDot.classList.remove('active')

    if (direction > 0) {
        active = active + 1
        if (active === total) {
            active = 0
        }
    } else if (direction < 0) {
        active = active - 1
        if (active < 0) {
            active = total - 1
        }
    }

    items[active]?.classList.add('active')
    dots[active]?.classList.add('active')

    if (numberIndicator) {
        numberIndicator.textContent = String(active + 1).padStart(2, '0')
    }
}

prevButton.addEventListener('click', () => {
    update(-1)
})

nextButton.addEventListener('click', () => {
    update(1)
})