Один «owl-dots» для двух каруселей?

Question

[Johny Sins]

Нужно реализовать двойную горизонтальную owl carousel, что бы ей можно было управлять с помощью owl-dots и owl-nav. Сначала сделал тупо две .owl-carousel, обработал события и теперь owl-nav от верхней карусели крутят и нижнюю карусель одновременно:

var owl = $('#ourChannelSec');
    owl.owlCarousel();
    $('#ourChannel .owl-nav .owl-next').click(function() {
        owl.trigger('next.owl.carousel');
    });
    $('#ourChannel .owl-nav .owl-prev').click(function() {
        owl.trigger('prev.owl.carousel');
    });

Но как сделать так что бы и по нажатию на доты крутились синхронно и верхняя и нижняя карусели не приходит в голову, айтемы карусели вывожу в цикле foreach. Подскажите пожалуйста как сделать такое

Answer 1

[yarnstart]

Думаю правильно будет повесить коллбэк на событие переключения карусели и синхронизировать их по индексу, возможно что-то подобное https://jsfiddle.net/0cx7hdkj/ .