【その2】jQueryプラグイン「owlcarousel」のイベントをキャッチして、処理を追加しよう

owlcarouselではイベントをキャッチしてトリガーを発火させ、処理を追加することができます。 発火用のトリガーはたくさん用意されていて、いくらでも拡張できます。

var owlMainVisualImage = $('.c-main-visual__gallery .owl-carousel');
owlMainVisualImage.owlCarousel({
  items: 1,
  margin: 0,
  dots: false,
  loop: true,
  nav: false,
  autoplaySpeed: 1000,
  autoplayTimeout: 4500,
  autoplayHoverPause: false,
  autoplay: true,
  center: true,
  onInitialized: changeClasses, //起動のタイミングでchangeClasses関数を実行
});
function changeClasses(e) {
  e.item.index;
});

owlMainVisualImage.on('changed.owl.carousel', function (e) {
  alert('test'); //owlcarouselのギャラリーが切り替わった後にalertの処理を実行。なお変わるたびに実行されます。
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

---

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

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