let nextBtn = document.querySelector('.next')
let prevBtn = document.querySelector('.prev')

let slider = document.querySelector('.slider')
let sliderList = slider.querySelector('.slider .list')
let thumbnail1 = document.querySelector('.slider .thumbnail1')
let thumbnail1Items = thumbnail1.querySelectorAll('.item')

thumbnail1.appendChild(thumbnail1Items[0])

// Function for next button 
nextBtn.onclick = function() {
    moveSlider('next')
}


// Function for prev button 
prevBtn.onclick = function() {
    moveSlider('prev')
}


function moveSlider(direction) {
    let sliderItems = sliderList.querySelectorAll('.item')
    let thumbnail1Items = document.querySelectorAll('.thumbnail1 .item')
    
    if(direction === 'next'){
        sliderList.appendChild(sliderItems[0])
        thumbnail1.appendChild(thumbnail1Items[0])
        slider.classList.add('next')
    } else {
        sliderList.prepend(sliderItems[sliderItems.length - 1])
        thumbnail1.prepend(thumbnail1Items[thumbnail1Items.length - 1])
        slider.classList.add('prev')
    }


    slider.addEventListener('animationend', function() {
        if(direction === 'next'){
            slider.classList.remove('next')
        } else {
            slider.classList.remove('prev')
        }
    }, {once: true}) // Remove the event listener after it's triggered once
}








