Как избежать обрезания изображения выходящего из блока?

visible не работает на background. Не может быть такого, что облака обрезаны прямо на изображении?
Может просто поиграться с background-size, задать ему contain.

Как правильно/красивее написать код js?

Сергей delphinpro, ну а всё-таки не очевиднее просто использовать комментарии? Типа:
"К этому элементу по клику добавляется active"
Не уверена, что прыгать по нескольким страницам или разбирать отдельную декларацию проще, чем комментарии прям в контексте (но могу быть не права).

Как правильно/красивее написать код js?

Smirator, можно ли использовать названия классов по БЭМ для JS?

Как правильно/красивее написать код js?

Rsa97, спасибо за годный совет)

Как правильно/красивее написать код js?

Ну вот да, Вы всё-таки предлагаете вешать классы и делегирование. А вот можете подскадать тогда, я использую БЭМ. Классы для стилей и JS как должны отличаться в html?

Как правильно/красивее написать код js?

Я не фронт, а верстальщик)
JS только изучаю, поэтому у меня чисто оформленческий вопрос, как красивее сделать, чтобы программисту было приятнее разбирать мою вёрстку. Понятно, что ему было бы приятнее, если бы я всё за него сделала, но мне за это не платят)

Как правильно/красивее написать код js?

Мне-то по-хорошему надо вёрстку продемонстрировать. А дальше бекенд может свой обработчик написать и заменить функцию в oncklick, класс или data-*.
Другое дело, я не могу определиться, что выбрать)

Как правильно/красивее написать код js?

Ну то есть не будет криво смотреться, если я абсолютно разным элементам добавлю один и тот же класс или data-*?

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

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

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

Мне нужно переделать бутстрапоские индикаторы. В центре всегда должен быть активный индикатор (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)
    }
})

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

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

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")        
        }
    }
}