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

Question

[Машка]

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

for (let i = 0; i < lengElements; 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")        
    }
}

<div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></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">
        <img src="img/image 197.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="img/image 197.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="img/image 197.png" class="d-block w-100" alt="...">
    </div>
</div>

Answer 1

[ForSureN1]

allSlides.forEach(item => item.classList.remove('class');
activeSlide.previousElementSibling.classList.add('class');
activeSlide.nextElementSibling.classList.add('class');

Comments

[Машка]

Интегрировала Ваше решение в скрипт, но почему-то не работает цикл удаления :(

function setActive() {
    indicators.forEach((item) => {
      item.classList.remove('nearctive');
    });

    for (let i = 0; i < lengElements; i++) {
        if ((i + 1) === centerLenthElement ) {
            indicators[i].classList.add("active")
            inner[i].classList.add("active")

            if (indicators[i].previousElementSibling) {
                indicators[i].previousElementSibling.classList.add('nearctive');
            } else indicators[lengElements - 1].nextElementSibling.classList.add('nearctive');
            if (indicators[i].nextElementSibling) {
                indicators[i].nextElementSibling.classList.add('nearctive');
            } else indicators[0].nextElementSibling.classList.add('nearctive');

        } else {
            indicators[i].classList.remove("active")
            inner[i].classList.remove("active")        
        }
    }
}

[ForSureN1]

Машка, что за переменная centerLenthElement ?
вы сами слайдер пишите или что ?

[ForSureN1]

Машка, у активного слайда автоматически ставится active класс, все что вам нужно, это при вызове функции получать заново этот активный элемент, то есть перезаписывать переменную после того как слайд сменился

let activeSlide = slider.querySelector('.carousel-item.active');

далее очищаем сразу все классы которые мы сами добавляем вручную

allSlides.forEach(item => item.classList.remove('class');

а после уже на найденный активный слайд, ищем предыдущий и следующий слайды, и вешаем свой класс

activeSlide.previousElementSibling.classList.add('class');
activeSlide.nextElementSibling.classList.add('class');

[Машка]

Мне нужно переделать бутстрапоские индикаторы. В центре всегда должен быть активный индикатор (centerLenthElement хранит, какой именно), два справа и слева от него имеют тоже свои стили, поэтому мне им и нужно задать классы .
Вот, что у меня имелось до Вашего комментария.
Я вот сейчас подумала, что не хватает прослушки события)

// Carousel
const myCarousel = document.getElementById('carouselExampleIndicators')
const indicatorsContainer = myCarousel.querySelector(".carousel-indicators")
const indicators = myCarousel.querySelectorAll(".carousel-indicators button")
const inner = myCarousel.querySelectorAll(".carousel-inner div")

const lengElements = indicators.length
let centerLenthElement;

if (lengElements % 2 === 0) {
        centerLenthElement = lengElements / 2 
} else {
        centerLenthElement = lengElements / 2 + 0.5
}

for (let i = 0; i < lengElements; 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")
    }
}

myCarousel.addEventListener('slide.bs.carousel', event => {
    console.log("event.direction", event.direction)
    if (event.direction === "left") {
        const indicatorFirst = myCarousel.querySelector(".carousel-indicators > button")
        const clone = indicatorFirst.cloneNode(true)
        indicatorFirst.remove()
        indicatorsContainer.append(clone)
    } else {
        const indicatorLast = myCarousel.querySelector(".carousel-indicators > button:last-child")
        const clone = indicatorLast.cloneNode(true)
        indicatorLast.remove()
        indicatorsContainer.prepend(clone)
    }
})

[ForSureN1]

Машка, было бы хорошо увидеть ссылку на codepen, потому что пока что задача не до конца ясна для меня

[Машка]

ForSureN1, https://codepen.io/new_folder/pen/ZEqdPaG
Я не вижу чего-то очевидного