Il'ia Kartovitskii

Добавь к свойствам, которые переназначешь !important

.example {
background: #fff!important;
}

Но вообще такой метод используй только в крайнем случае

Для начала первое, что бросается в глаза: left: 0% перекрывает right: 0%, избыточное свойство.

Во-вторых, пример:

<!-- Условный родительский контейнер .container -->
<div class="container">
    <!-- Список с элементами меню ul -->
    <ul>
        <li>
            <a href="#">Ссылка 1</a>
        </li>
        <li>
            <a href="#">Ссылка 2</a>
        </li>
        <li>
            <a href="#">Ссылка 3</a>
        </li>
    </ul>
</div>

<style>
    .container ul {
        display: block;
        height: 60px;
        line-height: 60px;
        background: #ededed;
    }
    .container ul li {
        display: inline-block;
        list-style-type: none;
        padding: 0 20px;
    }
</style>

В-третьих, как по мне, в вашем вопросе крайне недостаточно входных данных, поэтому ответ построен частично на догадках о том, что требуется.

Обрати внимание на поведение этих элементов, если конкретнее на классы при скролле, на JS/jQuery пилится достаточно просто, особенно с наглядным примером

Ссылку спам фильтр из твоего поста вырезал, ничего не посмотреть, но

Вероятнее всего причина кроется в том, что ты ничего не сделал с идентификаторами, каждый новый слайдер должен быть с уникальным id и соответсвенно каждый новый слайдер надо инициализировать отдельно

Или же вешать все на классы и инициализировать все через тот же each

npm run prod