0

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

8
  • Пробовал .querySelector убирает данный класс, но не добавляет к следующему, т.к. выбирается только первый div с данным ID Но если делаю .querySelectorAll, то выдает ошибку "A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received" и вообще не убирает ни класс, ни добавляет к следующим
    – Sharky
    2 авг 2022 в 20:19
  • querySelectorAll находит все элементы) .querySelectorAll('...').map(el => { el.classList })
    – Jour
    2 авг 2022 в 20:24
  • Короче как сделать так, чтобы он брал следующий div и у него уже делал проверку и, если класс отсутствует, то добавлял его, а у предыдущего убирал
    – Sharky
    2 авг 2022 в 20:25
  • попробуйте написать свой вариант, если у вас не получится, я подправлю Ваш код)
    – Jour
    2 авг 2022 в 20:28

1 ответ 1

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, я тут для примера так написал

5
  • const btnnext = document.getElementById('btn-prev') я бы использовал в место querySelector, по тестам getElementById работает быстрее
    – Jour
    2 авг 2022 в 21:00
  • @Jour я и имел в виду document... что использовать document.getElementById - просто поленился написать. Добавил в ответ )) 2 авг 2022 в 21:02
  • Проблема решена! Дальше еще посмотрю, но в целом что хотел, то и получилось! Спасибо всем) Где луцки ставить?)))
    – Sharky
    2 авг 2022 в 21:04
  • Зачем у вас arr[count].classList.toggle('link__focus') находится в if ... else? Строку можно вынести. 2 авг 2022 в 23:34
  • @OliverPatterson написал максимально понятно, как мне кажется для автора вопроса. 3 авг 2022 в 9:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.