Итак, знатоки, вопрос следующий. Нужно, чтобы при нажатии кнопок "Вперед" и "Назад" css стиль .link__focus перепрыгивал с блока на блок. Как сделать это с помощью JS? Либо с помощью CSS? (Упростил код, чтоб тут читалось хоть как-то)
const sidebar = document.querySelector('#carusel__link');
const btnPrev = document.querySelector('#btn-prev');
const btnNext = document.querySelector('#btn-next');
btnNext.addEventListener('click', () => {
if (sidebar.classList.contains('link__focus')) {
sidebar.classList.remove('link__focus');
} else {
sidebar.classList.add('link__focus')
}
})
li {
list-style-type: none;
display: inline;
margin: 0;
}
ul {
padding-left: 0;
}
.carousel {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.arrow {
cursor: pointer;
}
.prev {
background-size: contain;
width: 20px;
height: 20px;
border: none;
}
.next {
background-size: contain;
width: 20px;
height: 20px;
border: none;
}
.carusel__link {
text-decoration: none;
color: black;
padding: 27px 40px;
font-size: 5px;
text-transform: uppercase;
}
.link__focus {
background: linear-gradient(90deg, rgba(249, 207, 7, 1) 0%, rgba(255, 175, 0, 1) 100%);
}
<div class="carousel" id="carousel">
<button id="btn-prev" class="arrow prev">Назад</button>
<div class="gallery">
<ul>
<li><a id="carusel__link" class="carusel__link link__focus" href="#">Барабаны АБЗ</a></li>
<li><a id="carusel__link" class="carusel__link" href="#">Сушильные барабаны для нерудных метериалов</a></li>
<li><a id="carusel__link" class="carusel__link" href="#">Барабаннеые сушилки для органических материалов</a></li>
</ul>
</div>
<button id="btn-next" class="arrow next">Вперед</button>
</div>
.querySelectorAll('...').map(el => { el.classList })