One "owl-dots" for two carousels?

Question

Owl Carousel

We need to implement a double horizontal owl carousel so that it can be controlled with owl-dots and owl-nav. First, I stupidly made two .owl-carousels, processed the events and now the owl-nav from the top carousel is spinning and the bottom carousel at the same time:

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');
    });

But how to make it so that when you click on the dots, they spin synchronously and the top and bottom carousels do not come to mind, I display the carousel items in the foreach loop. Please tell me how to do this

Answer 1

I think it would be right to hang a callback on the carousel switching event and synchronize them by index, perhaps something like https://jsfiddle.net/0cx7hdkj/ .