Synchronize two owlCarousel

script.js

syncCarousel();

function syncCarousel() {
    var sync1 = jQuery('#sync1'),
        sync2 = jQuery('#sync2'),
        flag  = false,
        realindex = 0,
        loop = true;    // For loop true see workaround

    sync1.owlCarousel({
        loop: loop,
        margin: 10,
        items: 1,
        center: true,
        slideSpeed: 500,
        nav: true,
        navText: []
    })
    .on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            realindex = e.item.index;
            if(loop) {
                /* e.item.index - (e.relatedTarget._clones.length / 2) workaround because owl carousel has wrong loop index 
                see: https://github.com/OwlCarousel2/OwlCarousel2/issues/1203 */
                realindex = e.item.index - (e.relatedTarget._clones.length / 2);
                if (realindex < 0) {
                    realindex = e.item.count-1;
                }
            }

            sync2.trigger('to.owl.carousel', [realindex, 500, true]);
            flag = false;
        }
    });

    sync2.owlCarousel({
        loop: loop,
        margin: 10,
        items: 1,
        center: true,
        slideSpeed: 500,
        nav: true,
        navText: []
    })
    .on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            realindex = e.item.index;
            if(loop) {
                realindex = e.item.index - (e.relatedTarget._clones.length / 2);
                if (realindex < 0) {
                    realindex = e.item.count-1;
                }
            }

            sync1.trigger('to.owl.carousel', [realindex, 500, true]);
            flag = false;
        }
    });
}