Vue.jsによるカルーセルスライダーのサンプル (スタンダードなUIからVueに慣れる②)


#Vue.jsでカルーセルスライダー実装してみた

以前[Vue.jsによるタブ切り替えの実装](https://qiita.com/yske/items/7f1305ed904963d93729)を紹介しましたが、Vue.jsではカルーセルスライダーも簡単に実装する事ができます。
今回は「Vue Carousel」を使ってカルーセルスライダーを実装してみます。

##「Vue Carousel」とは
jQueryのslick.jsのように簡単にカルーセルスライダーを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回は[CDN](https://cdn.jsdelivr.net/npm/vue-carousel@0.18.0/dist/vue-carousel.min.js)で簡易的に導入します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="YusukeIkeda" data-slug-hash="VwZWJQx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="VwZWJQx">
  <span>See the Pen <a href="https://codepen.io/YusukeIkeda/pen/VwZWJQx/">
  VwZWJQx</a> by YusukeIkeda (<a href="https://codepen.io/YusukeIkeda">@YusukeIkeda</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#CSS
Vue Carouselを導入してブラウザのコンソールよりで要素を確認すると```.VueCarousel-slide```というクラスが生成されているのが分かります。今回はそのclassにCSSを適用します。

```css:CSS
.VueCarousel-slide {
  font-size:12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;
  background:#ccc;
  border-right:1px solid #FFF;
  box-sizing:border-box;
}
```

上記CSSを適用したクラスについてはコンソールにて確認する事ができます。

```HTML:動的に生成されたHTML要素
<div class="VueCarousel">
  <div class="VueCarousel-wrapper">
    <div class="VueCarousel-inner" style="transform: translate(0px, 0px); transition: transform 0.5s ease 0s; flex-basis: 514.5px; visibility: visible; height: auto;">
　　　<!--VueCarousel-slideというクラスが動的に生成されている事が確認できる-->
      <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 1</div>
      <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 2</div><div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 3</div>
    </div>
</div>
<div data-v-438fd353="" class="VueCarousel-pagination" style="">
  <div data-v-438fd353="" role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;">
      <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);">
      </button>
      <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);">
      </button>
    </div>
  </div>
</div>

```

#HTML
```html:HTML
<!DOCTYPE html>
<html>
<head>
<title>vue-carousel</title>
<link rel="stylesheet" type="text/css" href="slide.css">
</head>
<body>
<div id="app">
  <carousel>
    <slide>Slide 1</slide>
    <slide>Slide 2</slide>
    <slide>Slide 3</slide>
  </carousel>
</div>

<!-- Vue.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- vue-carousel.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue-carousel@0.18.0/dist/vue-carousel.min.js"></script>
<script src="slide.js"></script>
</body>
</html>
```

#JavaScript

下記は特にオプションを指定しない場合の設定です。

```js:JavaScript
var app=new Vue({
  el: "#app",
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
});

```

#よく使いそうなオプション

##自動再生

カルーセルスライダーを自動再生させたい場合は```autoplay="true"```を付与するだけでＯＫです。
次のスライドに移るタイミングは```:autoplayTimeout="1000"```で設定します。
デフォルト値は```2000```となっており、値を小さくするほど次のスライドへ移る時間が短くなります。

##ループ再生
カルーセルスライダーをループ再生させたい場合は```:loop="true"```を指定します。
デフォルト値は```false```となっております。

##スライドのスピード
スライドの速度を指定する場合はは```:speed="500"```を指定します。
デフォルト値は```500```となっており、値を小さくするほどスピードは速くなります。

```html:オプション指定例
<carousel :autoplay="true" :autoplayTimeout="1000" :loop="true" :speed="500">
  <slide>Slide 1</slide>
  <slide>Slide 2</slide>
  <slide>Slide 3</slide>
</carousel>
```


#まとめ

CDNを読み込んでから数十分でカルーセルスライダーを作ることができました。
Vueに移行した際もこういったアニメーション要素のあるUIは心配なさそうです。
また他にも色々なオプションが[gitHub](https://github.com/SSENSE/vue-carousel)で確認することができるので、ほとんどの案件で対応できるかと思います。

・参考
https://github.com/SSENSE/vue-carousel