Как реализовать перемещение между табами через стрелки?

Question

[Patris546]

Необходимо реализовать перемещение между табами посредством нажатия на стрелки. При нажатии на таб открывается модальное окно с описанием, в этом же окне есть стрелки, нажимая на которые можно перемещаться на следующее окно. Хотелось реализовать такую логику, что при нажатии на таб открывается окно и ему присваивается класс актив, далее происходит проверка на наличие данного класса и, если такой класс имеется, то при нажатии на стрелку окно скрывается, класс актив удаляется и открывается следующее окно. Код работает неправильно: при первом заходе на страницу и нажатии на правую стрелку все три таба просматриваются, хотя классы присваиваются им криво (третьему не присваивается), а затем, если нажать на подложку и снова на первый таб, то при нажатии на стрелку происходит скачок с 1ого таба на 3ий (при этом у второго остается класс актив). Возможно, если прописать команду удаления класса актив, например, при нажатии на подложку и сокрытии всех окон, то все более-менее работало бы, но не получается этого сделать, класс актив так и остается.

let tabsBtn = document.querySelectorAll('.projects__tabs-item'),
tabsItem = document.querySelectorAll('.modals__cards-item'),
projectArrows = document.querySelector('.modals__slider-arrows'),
modalItem = document.querySelector('.modals');


tabsBtn.forEach(el => {
    el.addEventListener('click', function(){
        modalItem.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    })
});

for (let i = 0; i < tabsBtn.length; i++) {
    tabsBtn[i].addEventListener('click', function(){
        tabsItem[i].style.display = 'block';
        tabsItem[i].classList.add('modals-active');
            for(let slideIndex = i; slideIndex < tabsItem.length - 1; slideIndex++){
                projectArrows.addEventListener('click', function(){
                    if(tabsItem[slideIndex].classList.contains('modals-active')){
                        tabsItem[slideIndex].style.display = 'none';
                        tabsItem[slideIndex].classList.remove('modals-active');
                        tabsItem[slideIndex + 1].style.display = 'block';  
                        
                } 
                    tabsItem[slideIndex].classList.add('modals-active');
                })
            }
    });  
}

modalItem.addEventListener('click', function(e){
    let target = e.target;
    if(target.classList.contains('modals')){
        tabsItem.forEach(el => {
            el.style.display = 'none';
        })
        modalItem.style.display = 'none';
    }
    document.body.style.overflow = 'visible';
})

ps. весь код с html и css скинуть не получается, слишком много символов.

Comments

[Ankhena]

Загуглите любой урок по созданию слайдера на JS. Не дублируйте кнопки со стрелками.

tabsItem[i].style.display = 'block';
tabsItem[i].classList.add('modals-active');

При наличии второй, первая строчка не нужна.
И в других аналогичных ситуациях манипулируйте классами, а не стилями напрямую, самому же будет легче жить.

весь код с html и css скинуть не получается, слишком много символов.

Полно сервисов-песочниц, codepen.io, jsfiddle.net и т.д. Только весь код туда не надо, а только минимальный достаточный для иллюстрации проблемы.