0

Есть карусель бутстрапа, по умолчанию всегда центральный элемент активен (слайдер работает по таймеру, активный элемент динамичен). Как динамически добавить к элементу до и после классы, например, 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

1
  • Следующему вообще через css можно сделать, а в остальном, у карусели есть события смены слайдов. в них и обрабатывайте.
    – teran
    1 июн 2023 в 11:43

1 ответ 1

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

3
  • Да, делала похоже, но могли бы Вы подсказать, почему не работает цикл удаления класса. Ошибок не выдаёт.
    – Maria
    1 июн 2023 в 12:15
  • Наверное, смог бы, если бы знал, как получается переменная centerLenthElement. Полагаю, условие всегда даёт true в Вашем цикле. Я ваш вопрос поправил настолько, насколько мне было понятно, что означают переменные в коде. В общем, сделайте console.log((i + 1) === centerLenthElement) в начале тела цикла и смотрите, что там всегда true. 1 июн 2023 в 12:24
  • codepen.io/new_folder/pen/ZEqdPaG - так, попыталась интегрировать Ваш код в свой. Но не взлетело)
    – Maria
    1 июн 2023 в 13:26

Ваш ответ

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

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