Как добавлять\удалять css класс у элементов с помощью JS

Question

Итак, знатоки, вопрос следующий. Нужно, чтобы при нажатии кнопок "Вперед" и "Назад" 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>

Answer 1

может быть такая реализация будет полезна, написано просто - должно быть все понятно. Смысл в том, что находим все элементы - и при помощи клика на кнопку двигаемся по массиву используя индекс

let count = 0
let arr = [...document.querySelectorAll('.carusel__link')]
btnnext.addEventListener('click', () => {
  arr[count].classList.toggle('link__focus')
  if (count >= arr.length - 1) {
    count = 0
    arr[count].classList.toggle('link__focus')
  } else {
    count++
    arr[count].classList.toggle('link__focus')
  }
})

btnprev.addEventListener('click', () => {
  arr[count].classList.toggle('link__focus')
  if (count <= 0) {
    count = arr.length - 1
    arr[count].classList.toggle('link__focus')
  } else {
    count--
    arr[count].classList.toggle('link__focus')
  }
})

li {
  list-style-type: none;
  display: inline;
  margin: 0;
}

ul {
  padding-left: 0;
}

.carousel {
  height: 100%;
  width: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.arrow {
  cursor: pointer;
}

.prev {
  background-size: contain;
  height: 20px;
  border: none;
}

.next {
  background-size: contain;
  height: 20px;
  border: none;
}

.carusel__link {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  font-size: 4px;
  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="btnprev" 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="btnnext" class="arrow next">Вперед</button>
</div>

P.S: Если будете где-то использовать кнопки ищите через document.getElementById, я тут для примера так написал

БЛОГ НА HUSL

Как добавлять\удалять css класс у элементов с помощью JS

Ответы (1 шт):