How do I get owl-carousel to sync?

Question

I have a slider like this. However, I could not set the description and image to work synchronously. I tried to synchronise but I got a jquery error. Can you help me with the subject? I've been trying for hours, I really couldn't do it. I want sync1 and sync2 divs to work synchronously.

https://codepen.io/salih-nal/pen/KKrQrBE

$(document).ready(function() {
    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4;
    var syncedSecondary = true;
    var manualSyncFlag = true;

    sync1.on("initialized.owl.carousel", function() {
        sync2.find(".owl-item").eq(0).addClass("current");
    });

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: false,
        loop: true,
        dots: false,
        responsiveRefreshRate: 200,
        navText: [
            '<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
            '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'
        ],
        onTranslated: syncPosition,
        onDrag: function() {
            manualSyncFlag = false;
        }
    });

    sync2.owlCarousel({
        items: slidesPerPage,
        dots: false,
        nav: false,
        center: true,
        smartSpeed: 200,
        slideSpeed: 500,
        loop: true,
        responsiveClass: false,
        margin: 0,
        URLhashListener: true,
        startPosition: "URLHash",
        slideBy: slidesPerPage,
        responsiveRefreshRate: 100,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 5
            }
        },
        onTranslated: syncPosition2,
        onDrag: function() {
            manualSyncFlag = false;
        }
    });

    sync2.on("click", ".owl-item", function(e) {
        e.preventDefault();
        var number = $(this).index();
        sync1.trigger("to.owl.carousel", [number, 300, true]);
    });

    function syncPosition(el) {
        if (manualSyncFlag) {
            var current = el.item.index;
            sync2
                .find(".owl-item")
                .removeClass("current")
                .eq(current)
                .addClass("current");
            var onscreen = sync2.find(".owl-item.active").length - 1;
            var start = sync2.find(".owl-item.active").first().index();
            var end = sync2.find(".owl-item.active").last().index();

            if (current > end) {
                sync2.data("owl.carousel").to(current, 100, true);
            }

            if (current < start) {
                sync2.data("owl.carousel").to(current - onscreen, 100, true);
            }
        } else {
            manualSyncFlag = true;
        }
    }

    function syncPosition2(el) {
        if (syncedSecondary && manualSyncFlag) {
            var number = el.item.index;
            sync1.data("owl.carousel").to(number, 100, true);
        }
    }
});

#sync2 {
    max-height: 220px;
}

.owl-big {
    .item {}
    &.owl-theme {
        position: relative;
    }
}

.owl-small {
    .item {
        transform: translate3d(0, 0, 0);
        margin: 50px 0;
        .content {
            box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
            transition: 0.3s;
            transform: scale(1);
            max-width: 79px;
            height: 110px;
            img {
                height: 100%;
            }
        }
    }
}

.owl-item {
    margin: 0;
    .content {
        img {
            max-width: 100%;
        }
    }
    &.center {
        margin: 0 10px;
        .item {
            .content {
                transform: scale(1.66);
            }
        }
    }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div style="max-width:568px; margin:0 auto;">
  <div id="sync2" class="owl-small owl-carousel owl-theme">
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
    <div class="item">
      <div class="content">
        <img src="https://via.placeholder.com/100x100" alt="" title="">
      </div>
    </div>
  </div>
  <div id="sync1" class="owl-big owl-carousel owl-theme">
    <div class="item">
      <h4>Micheal Jack 1</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="item">
      <h4>Micheal Jack 2</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="item">
      <h4>Micheal Jack 3</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="item">
      <h4>Micheal Jack 4</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="item">
      <h4>Micheal Jack 5</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="item">
      <h4>Micheal Jack 6</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>