Слайдер со списком
 

Есть слайдер со списком, где каждому слайду в каруселе соответствует элемент в списке, вот он - [, сделан на owl-carousel 2.0.
Сейчас он работает так - нажимаешь на элементы списка, элемент списка становиться активным (font-weight: bold; ), слайдер прокручивается до слайда, который привязан к этому элементу списка. Связаны они через значения href у элемента списка (это ссылка) и hash-data у слайда.
Но если прокручивать слайдер стрелками влево или вправо, то элементы списка никак не реагируют - активный элемент не выделяется. Опции для этого в плагине, который юзается, не нашел.В связи с чем вопрос - как это реализовать?

Сейчас структура кода такая:

<div class="slide-list">
    <a class="slide-url" href="#31">Санкт-Петербург</a>
    <a class="slide-url" href="#32">Москва</a>
    <a class="slide-url" href="#33">Калининград</a>
</div>
<div class="slider">
    <div class="owl-item">
        <div class="item" data-hash="31">
            <div class="item-content">
                <span>Some content</span>
            </div>
        </div>
    </div>
    <div class="owl-item active"><!-- СЕЙЧАС АКТИВЕН ЭТОТ СЛАЙД -->
        <div class="item" data-hash="32"><!-- А ВОТ ЕГО HASH -->
            <div class="item-content">
                <span>Some content</span>
            </div>
        </div>
    </div>
    <div class="owl-item">
        <div class="item" data-hash="33">
            <div class="item-content">
                <span>Some content</span>
            </div>
        </div>
    </div>
</div>

Сверху идет список, снизу слайдер. У активного слайда есть класс .active, внутри него лежит div у которого есть data-hash. Как написать функцию, которая отслеживала бы появление класса .active у слайда, смотрела бы какой у него (его прямого потомка) data-hash, потом искала в списки элемент (ссылку) у которого значение href равно имеющемуся data-hash и присваивала этому элементу новый класс. Вот как это сделать?