owl carousel2 ことはじめ

# 'owl carousel2' とは

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

特徴としては

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

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

同様のライブラリに [slick](https://kenwheeler.github.io/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)

## 公式サイトから

[こちら](http://owlcarousel2.github.io/OwlCarousel2/)の `Download` からzipをダウンロードできます

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

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

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

- owl.carousel.min.js

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

## CDNから

[CDN](https://cdnjs.com/libraries/OwlCarousel2) がこちらからあるのでこれの

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

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

## npm / yarn

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

- [npm](https://www.npmjs.com/package/owl.carousel2)
- [yarn](https://yarnpkg.com/en/package/owl.carousel2)

# 使用法 / 例

## part1

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

### HTML

```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>
```

#### ハマりポイント

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

#### 備考

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

### CSS (SCSS)

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

### javascript (jQuery)

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

### EXAMPLE

https://codepen.io/nao-a/pen/gOYVLVe

## part2

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

### HTML

```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)

```css
.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;
}
```

```scss
.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)

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

```

### EXAMPLE

https://codepen.io/nao-a/pen/pozMReo

# 最後に

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

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

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

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