'owl carousel2' とは

カルーセルデザイン(スライドデザイン)を表現するライブラリのひとつです

特徴としては

レスポンシブ対応
ドラッグでのスライド移動ができる
スワイプでのスライド移動ができる

といった、スマートデバイス向けの挙動をサポートしています

同様のライブラリに slick など、いくつかのライブラリが存在します

Download and Install

前提

必ずHTMLにjQueryをロードするようにしてください
また、以下に記すタグ埋め込みは必ずjQueryのものの下に記載するようにしてください
この記事を記述するに際して、使用しているライブラリやアプリのバージョンは以下の通りです
- jQuery
  - 3.4.1
- owl carousel2 本体
  - 2.3.4
- chrome
  - 77.0 (77.0.3865.90 official build) (x64)
- IE
  - 11 (11.356.18362.0)

公式サイトから

こちらの Download からzipをダウンロードできます

zipを展開し、cssは dist/assets 内の

owl.carousel.min.css
owl.theme.default.css

を任意のスタイルシートディレクトリにコピーし、javascriptは dist 内の

owl.carousel.min.js

を任意のスクリプトディレクトリにコピーしてください

CDNから

CDN がこちらからあるのでこれの

owl.carousel.min.css
owl.theme.default.css
owl.carousel.min.js

をそれぞれ <link> タグ、 <script> タグに追加してください

npm / yarn

あまり詳しく解説しません

npm
yarn

使用法 / 例

part1

一番シンプルなデザインについて記載します

HTML

<body>
  <div class="your_awesome_carousel owl-carousel owl-theme">
    <div>
      <img src="your_awesome_image1.png">
    </div>
    <div>
      <img src="your_awesome_image2.png">
    </div>
    <div>
      <img src="your_awesome_image3.png">
    </div>
    <div>
      <img src="your_awesome_image4.png">
    </div>
    <div>
      <img src="your_awesome_image5.png">
    </div>
    <div>
      <img src="your_awesome_image6.png">
    </div>
  </div>
</body>

ハマりポイント

<div class="owl-carousel owl-theme"> の部分について
- この部分はカルーセルデザイン適用対象のrootになります
- 必ず owl-carousel owl-theme の2つを設定する必要があります

備考

カルーセルデザインを適用させたい箇所のタグを全て <div> にしていますが、実際は <ul><li></li>...</ul> のようなリストタグでも良いようです

CSS (SCSS)

特に設定しなくても動いてくれます

javascript (jQuery)

$(document).ready(function () {
  $('.your_awesome_carousel').owlCarousel();
});

EXAMPLE

part2

アイテムを中央にし、スクロールボタンが表示されているデザインを説明します

HTML

<body>
  <div>
    <ul class="owl-carousel owl-theme">
      <li>
        <img src="your_awesome_image1.png">
      </li>
      <li>
        <img src="your_awesome_image2.png">
      </li>
      <li>
        <img src="your_awesome_image3.png">
      </li>
      <li>
        <img src="your_awesome_image4.png">
      </li>
      <li>
        <img src="your_awesome_image5.png">
      </li>
      <li>
        <img src="your_awesome_image6.png">
      </li>
    </ul>
    <div class="owl-prev"></div>
    <div class="owl-next"></div>
  </div>
</body>

一番の変化は最後から3~4行目にある owl-prev owl-next のクラスを持つ <div> タグになります

これらがprev/nextのボタンに変化してくれます

CSS (SCSS)

.owl-item {
  opacity: 0.3;
  transition: 1s ease-out;
}
.owl-item.center {
  opacity: 1;
}

.owl-next {
  margin: 0 100px !important;
}
.owl-prev {
  margin: 0 100px !important;
}

.owl-item {
  opacity: 0.3;
  transition: 1s ease-out;

  &.center {
    opacity: 1;
  }
}

.owl {
  &-next {
    margin: 0 100px !important;
  }
  &-prev {
    margin: 0 100px !important;
  }
}

.owl-item & .owl-item.center

中央に来ているスライド以外を透過しています

owl-item 及び center はowl carousel2が実行時に自動的にセットしてくれるクラスになります

owl-next/owl-prev

無理矢理 左右のマージンをあけています

!important をつけないと margin 属性が効いてくれませんでした

しかし、もしかしたらほかの方法で設定することができるかもしれません

javascript (jQuery)

$(document).ready(function () {
  $('.owl-carousel').owlCarousel({
    center: true,
    items: 3,
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      600: {
        items: 1
      }
    }
  });
});

EXAMPLE

最後に

どのライブラリでも言えることですが、触る為のルールを会得すれば、簡単にカルーセルデザインを実装することができる良いライブラリであると感じます

しかし、slickと比較した際に、slickにはある beforeChange のイベントコールバックの設定に丁度当たるものが無い為、スライドした瞬間に center に来ている要素に対してスタイルを当てる、といったことは苦手な印象を受けました

さらっと触っただけですので、こちらももしかしたら別の方法によって達成可能かもしれません

よろしければご指摘くださいませ