Переместить пользовательскую нумерацию страниц и правильно показать слайд

Question

<div id="started-carousel">
      <div id="started-panel-01">1</div>
      <div id="started-panel-02">2</div>
      <div id="started-panel-03">3</div>
      <div id="started-panel-04">4</div>
</div>
<div id="started-carousel-nav" class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
</div>

$("#started-carousel").owlCarousel({
        dots: false,
        items: 1,
        itemsDesktop: [1199, 1],
        itemsDesktopSmall: [979, 1],
        itemsTablet: [768, 1],
        itemsMobile: [479, 1],
        singleItem: !0,
        slideSpeed: 700,
        rewindNav: !1,
        touchDrag: !1,
        mouseDrag: !1,
        afterAction: t
    });
    var c = $("#started-carousel").data("owlCarousel");
    $("#started-carousel .next").click(function() {
        c.next()
    });
    var s = $("#started-carousel-nav > .flex-item").click(function() {
        var t = s.index(this);
        //c.goTo(t)
       $("#started-carousel").owlCarousel();
       $("#started-carousel").trigger("to.owl.carousel", [0, 500, true]);
    });

за пределами карусели div, карусель-nav находится в своем собственном div.

c.goTo() не является функцией, упомянутой в консоли. проверил гугл и его не было в доке. Нашли ответ на to.owl.carousel и опробовали. Карусель-навела себя неточно. Например, нажмите 1, он не перейдет к слайду 1. Если нажать 2, он вернется к 1. Не уверен, почему он вел себя неправильно. Ценю помощь.

Answer 1

Я думаю, что вам не нужно создавать свою навигацию. Сова-Карусель имеет навигацию по умолчанию. Вы должны проверить здесь, если вы используете версию 2: Docs & Demos.

Если вы используете первую версию, вы должны использовать

navigation: true

вместо

nav: true

Библиотека добавит навигацию в сам DOM.