Синхронизировать owl-carousel через собитие

есть 4 owlcarousel с одинаковыми опциями и одиникаовыми класами как сделать что бы при свайпе на любой из каруселей на остальных выбирался такой же слайд? через кнопку сделал функицию но нужно и при свайпе

<pre>
    <div class="packages-wrapper">
        <div class="owl-carousel">
            <div class="packages-wrapper__card packages-wrapper__card_blue">
                card-1
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_green">
                card-2
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_red">
                card-3
            </div>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet accusamus
        delectus voluptates quos ut, quibusdam tempore ad provident eos ipsam!
    </p>
    <div class="packages-wrapper">
        <div class="owl-carousel">
            <div class="packages-wrapper__card packages-wrapper__card_blue">
                card-1
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_green">
                card-2
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_red">
                card-3
            </div>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis
        voluptate vel voluptatum est neque eius consectetur ut. Quisquam
        praesentium, numquam deserunt sed nisi rem temporibus quam? Blanditiis,
        pariatur optio.
    </p>
    <div class="packages-wrapper">
        <div class="owl-carousel">
            <div class="packages-wrapper__card packages-wrapper__card_blue">
                card-1
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_green">
                card-2
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_red">
                card-3
            </div>
        </div>
    </div>
    <div class="packages-wrapper">
        <div class="owl-carousel">
            <div class="packages-wrapper__card packages-wrapper__card_blue">
                card-1
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_green">
                card-2
            </div>
            <div class="packages-wrapper__card packages-wrapper__card_red">
                card-3
            </div>
        </div>
    </div>
</pre>

  $('.packages-wrapper .owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    lazyLoad: true,
    center: true,
    nav: true,
    dots: false,
    autoWidth: true,
    items: 1,
    smartSpeed: 800,
});

$('.packages-wrapper .owl-carousel').on(
    'click onDragged',
    '.owl-next',
    function () {
        $(this).trigger('prev.owl.carousel');
        $('.packages-wrapper .owl-carousel').trigger('next.owl.carousel');
    },
);

$('.packages-wrapper .owl-carousel').on(
    'click onDragged',
    '.owl-prev',
    function () {
        $(this).trigger('prev.owl.carousel');
        $('.packages-wrapper .owl-carousel').trigger('prev.owl.carousel');
    },
);
//тригер - это собитие
$('.packages-wrapper .owl-carousel').on(
    'changed.owl.carousel',
    function (e) {
        console.log(e.item.index);
    },
);