let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item');

let countItem = items.length;
let itemAtive = 0;

next.onclick = function () {
    itemAtive = itemAtive + 1;
    if (itemAtive >= countItem) {
        itemAtive = 0;
    }
    showSlider();
}

prev.onclick = function () {
    itemAtive = itemAtive - 1;
    if (itemAtive < 0) {
        itemAtive = countItem - 1;
    }
    showSlider();
}

function showSlider() {
    let itemAtiveOld = document.querySelector('.slider .list .item.active');
    let thgumbnailAtiveOld = document.querySelector('.thumbnail .item.active');
    itemAtiveOld.classList.remove('active')
    thgumbnailAtiveOld.classList.remove('active')

    items[itemAtive].classList.add('active');
    thumbnails[itemAtive].classList.add('active');
}