【jQueryプラグイン】owl.carouselでchangeのタイミングでコールバック関数を実行、現在表示されている要素番号を取得する

owl.carouselというレスポンシブ対応のギャラリー用、jQueryプラグインで、changeのタイミングでコールバック実行したい時に使うやり方 on〜というプロパティ名にコールバック用関数をセットすると取得できる owl.carouselの公式サイト https://owlcarousel2.github.io/OwlCarousel2/

var owlMainVisualImage = $('.owl-carousel');
if (owlMainVisualImage.length !== 0) {
  owlMainVisualImage.owlCarousel({
    items: 1,
    margin: 0,
    dots: false,
    loop: true,
    nav: false,
    autoplaySpeed: 500,
    autoplayTimeout: 4500,
    autoplayHoverPause: false,
    autoplay: true,
    center: true,
    onChange: callback,
  });

  function callback(e) {
    console.log(e.item.index);
  }
}

 

---

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】