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

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

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

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

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

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

 気軽にカルーセルができる「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.

カスタマイズも簡単!オートスライドもスピード調整も思いのまま

すごく手軽ですが、なかなかこのままでは使えないという場合も多いのではないでしょうか?

このプラグイン、自動でスライドするようにしたり、画像のレスポンシブ対応させるなどオプションも豊富です。

イージングやスピード、ページネーションの色や大きさに関しても、オプションで変えられるようになっています。

なので、もっと動きにこだわりたい!って人にも便利に使えるプラグインです。

詳細については、Vue Carouselの公式ドキュメント(英語)を見てみてください。

他にも便利なプラグインがあります

jQueryなどに比べると後発な分、ライブラリーやプラグインの数が少ないところはありますが、増えつつあります。

他にも、「TOPへ戻るボタン」についてもプラグインの紹介もしているので、良かったら合わせて読んでみてはいかがでしょうか?

【脱jQuery】Vue.jsで簡単に「トップへ戻るボタン」を作る方法

 

まとめ

カルーセルは、jQueryのslick.jsなどに慣れていると置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。

これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。

 

さらにVue.jsを知りたくなったと言う人は、公式ドキュメントが日本語で充実しているので、おすすめです。

本で勉強したい人は、以下の2冊がおすすめです。

こちらの本は、基本が網羅的に解説されており、最初の1冊としてはもちろん、辞書的に1冊手元にあると便利です。
こちらは、これから発売ですが、作者のmioさんはブログでもVue.jsについて分かりやすく書いてくださってるので、期待大。僕もすでに予約済みです。