【脱jQuery】Vue.jsで簡単に「カルーセル」を作る方法

更新日 2018年5月15日
著者花井雅敏
カテゴリー Web制作

この記事では、Vue.jsで簡単に「カルーセル」を作る方法をご紹介します。

Vue.jsは、小さくも始められるjsフレームワークです。
なので、「とりあえずjQueryでやってたことを置き換えてみる。」と言った使い方もできます。

ただ、今までjQueryぐらいしか使ってなかった僕と同じJavascript初心者の方だと、カルーセルはjQueryを使ったslick.jsなどを使っていて、乗り換えられないという方も多いのではないでしょうか？

その悩みを簡単に解決するのが、Vue.js用のプラグイン「Vue Carousel」です。

このプラグインを使うことで、脱jQueryに一歩近づけます。

気軽にカルーセルができる「Vue Carousel」
- インストール
- 使い方
カスタマイズも簡単！オートスライドもスピード調整も思いのまま
他にも便利なプラグインがあります
まとめ

気軽にカルーセルができる「Vue Carousel」

Vue Carousel

インストール

npm install -S vue-carousel

ここで、読み込むのですが、今回は、デモ用にCDNで、VueとVue Carouselを読み込んでいきます。

公式の方に、グローバルとローカルのそれぞれの読み込み方が書かれているので参考にしてください。

htmlの中に、下記のコードを追加します。

html

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>

使い方

使い方は、簡単。

まず、Vue コンストラクタ関数を new してルートのインスタンスを作成します。そしてVue Carouselのコンポーネントをインポートします。

Javascript

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

html

<div id="app">
   <carousel>
     <slide>
       <span class="label">
         Slide 1 Content
       </span>
     </slide>
     <slide>
       <span class="label">
         Slide 2 Content
       </span>
     </slide>
     <slide>
       <span class="label">
         Slide 3 Content
       </span>
     </slide>
     <slide>
       <span class="label">
         Slide 4 Content
       </span>
     </slide>
  </carousel>
</div>

たったこれだけで、Vueを使って、カルーセルが作れました。

CSSで見た目を整えてやった実際に動くサンプルがこれです。

See the Pen Vue-carousel by MASATOSHI HANAI (@hanahana0201) on CodePen.