Отслеживать дата-атрибут элемента OwlCarousel, на основе его значения менять класс другого элемента

у меня есть слайдер OwlCarousel, нужно отслеживать значение дата-атрибута элемента слайдера div.slider__item и присваивать на основе значения дата-атрибута - класс другому элементу (к div.navigation__item присвоить .navigation-color), если атрибут = black, тогда присвоить класс, только начал изучать js и не совсем понимаю как правильно и что отслеживать, прошу сильно не ругаться, голову сломал уже, единственное что у меня получилось я приложил, класс меняется но дальше не работает ничего, прописывать условие и делать remove тоже пробовал, не помогло;

let navItems = document.querySelectorAll('.navigation__item');
let sliderItems  = document.querySelectorAll('.slider__item');

function switchColor(elem){
    for(let i = 0; i< sliderItems.length; i++){
        for(let z = 0; z < navItems.length; z++){
            if(sliderItems[i].hasAttribute('data-slider-color')&& sliderItems[i].getAttribute('data-slider-color') == 'black'){
                navItems[z].classList.add('navigation-color')
            }
        }
    }
    
}
switchColor()

<div class="navigation__menu">
    <ul>
        <li class="navigation__item">Главная</li>
        <li class="navigation__item">Каталог</li>
        <li class="navigation__item">Акции</li>
        <li class="navigation__item">Доставка и оплата</li>
        <li class="navigation__item">Контакты</li>
    </ul>
</div>

<div class="slider">
                <div class="owl-carousel owl-theme" id="owl-slider">
                    <!-- slider item -->
                    <div class="slider__item" data-slider-color="black">
                        <img src="./source/img/header/antonio-maretti.jpg" alt="antonio-maretti" >
                    </div>
                    <!-- slider item -->
                    <div class="slider__item" data-slider-color="white">
                        <img src="./source/img/header/penhaligons.png" alt="penhalihons">
                    </div>
                    <!-- slider item -->
                    <div class="slider__item">
                        <img src="./source/img/header/signorina-libera.jpg" alt="signorine-libera">
                    </div>
                </div>
            </div>