Как добавить и удалить классы к соседним элементам списка?

Рейтинг: 0Ответов: 1Опубликовано: 01.06.2023

Есть карусель бутстрапа, по умолчанию всегда центральный элемент активен (слайдер работает по таймеру, активный элемент динамичен). Как динамически добавить к элементу до и после классы, например, nearctive?

let indicators = document.querySelectorAll('.carousel-indicators .button');
let lengthElements = indicators.length;

for (let i = 0; i < lengthElements; i++) {
  if ((i + 1) === centerLenthElement) {
    indicators[i].classList.add("active")
    inner[i].classList.add("active")
  } else {
    indicators[i].classList.remove("active")
    inner[i].classList.remove("active")
  }
}
.carousel-item {
  background-color: grey;
  min-width: 100px;
  height: 100px;
}

.button {
  background-color: grey;
}

.carousel-item_style_1 {
  background-color: blue;
}

.carousel-item_style_2 {
  background-color: limegreen;
}

.carousel-item_style_3 {
  background-color: red;
}

.carousel-item_style_4 {
  background-color: teal;
}

.carousel-item_style_5 {
  background-color: yellow;
}

.carousel-item_style_6 {
  background-color: lime;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleIndicators" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item carousel-item_style_1 active">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_2">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_3">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_4">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_5">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_6">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
  </div>
</div>

javascript bootstrap5
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Не придумал, как можно показать, что класс добавляется. Сделал, что первое пришло в голову :). Ниже примерный код того, как можно было бы реализовать задумку автора.

document.addEventListener("DOMContentLoaded", () => {
  const carousel = document.getElementById('carouselExampleIndicators');
  const slides = document.querySelectorAll('.carousel-item');

  function setClassToPrevNextSlide() {
    const slideActive = carousel.querySelector('.carousel-item.active');
    slides.forEach((slide) => {
      slide.classList.remove('nearctive');
    });

    if (slideActive.previousElementSibling) {
      slideActive.previousElementSibling.classList.add('nearctive');
    }

    if (slideActive.nextElementSibling) {
      slideActive.nextElementSibling.classList.add('nearctive');
    }
  }

  setClassToPrevNextSlide();

  //Сработает в момент окончания перехода слайда (подсмотрено в документации к Carousel Bootstrap)
  carousel.addEventListener('slid.bs.carousel', event => {
    setClassToPrevNextSlide();
  });
});
.carousel-item {
  background-color: grey;
  min-width: 100px;
  height: 100px;
}

.button {
  background-color: grey;
}

.carousel-item_style_1 {
  background-color: blue;
}

.carousel-item_style_2 {
  background-color: limegreen;
}

.carousel-item_style_3 {
  background-color: red;
}

.carousel-item_style_4 {
  background-color: teal;
}

.carousel-item_style_5 {
  background-color: yellow;
}

.carousel-item_style_6 {
  background-color: lime;
}

.nearctive {
  transform: scale(1.1);
  display: block!important;
  opacity: 0.5;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleIndicators" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item carousel-item_style_1 active">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_2">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_3">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_4">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_5">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
    <div class="carousel-item carousel-item_style_6">
      <!--<img src="img/image 197.png" class="d-block w-100" alt="..."> -->
    </div>
  </div>
</div>