ギャラリー系jQueryプラグイン「owlcarousel」の表示アニメーションにanimate.cssを適用してもっと素敵にカスタマイズする方法

事前にanimate.cssを読み込んでおき、javascriptで以下を記述してやると、owlcarouselの切り替え時にanimate.cssが使える.

var owlMainVisualCatch = $('.owl-carousel');
if (owlMainVisualCatch.length !== 0) {
  owlMainVisualCatch.owlCarousel({
    items: 1,
    margin: 0,
    dots: false,
    loop: true,
    nav: false,
    autoplaySpeed: 1000,
    autoplayTimeout: 4000,
    autoplayHoverPause: false,
    autoplay: true,
    center: true,
    animateIn: 'fadeInDown', //animate.cssの名前をここに入力して表示する際の動作をここで指定する
    animateOut: 'fadeOutDown', //animate.cssの名前をここに入力して消える際の動作をここで指定する
  });
}

animate.cssは以下よりダウンロードできます！ https://daneden.github.io/animate.css/

---

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

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