0
<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にあります。カスタムページネーションとスライドを正しく移動する
c.goTo()
は、前述のコンソールと同じ機能ではありません。 Googleにチェックされており、ドキュメントに存在しませんでした。 to.owl.carouselで答えを見つけ、テストしました。カルーセル・ナビは不正確に動作しました。たとえば、1をクリックすると、スライド1には移動しません.2をクリックすると、1に戻ります。なぜ正しく動作しなかったのか分かりません。ヘルプを感謝します。