【Vue-carousel】Vueを使ったカルーセルスライダーを実装する方法

Vueでカルーセルやスライダーを実装したいときに便利なのが「Vue Carousel」です。

この「vue-carousel」は、Vue.jsのカルーセルやスライダーを実装するためのコンポーネントライブラリになります。

実装方法もシンプルで簡単です。

Vue Carousel

インストール

導入させる方法としてはnpm、yarnでインストールするかcdnのファイルを読み込ませることで使うことができます。

npm

npm install vue-carousel

yarn

yarn add vue-carousel

cdn

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

導入方法

ライブラリの取り込みは下記になります。

import VueCarousel from 'vue-carousel';

cdnで読み込ませる方法

今回はcdnを使う方法を紹介します。

html

<div class="slider-inner">
        <carousel :per-page="1" :speed="500">
        <slide><img src="https://placehold.jp/300x150.png"></slide>
        <slide><img src="https://placehold.jp/300x150.png"></slide>
        <slide><img src="https://placehold.jp/300x150.png"></slide>
        <slide><img src="https://placehold.jp/300x150.png"></slide>
        <slide><img src="https://placehold.jp/300x150.png"></slide>
        </carousel>
</div>

オプション設定

Vue Carouselはオプションの設定が可能です。

オプション設定は<carousel>に指定することができます。

よく使うオプションを紹介します。

オプション	説明
:per-page=”1″	スライダーに表示させる写真の枚数を指定します。 1を指定すると画面上に1枚が表示されます。
:speed=”500″	スライダーの速度（スピード）を設定
navigation-prev-label=”戻る”	戻るボタンを設定
navigation-next-label=”次へ”	次へボタンを設定

js

<script>
var app = new Vue({
  el: "#app",
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide,
  },
});    
</script>

css

Vue Carouselには特にcssは用意されていないので下記を参考に自分で調整しましょう。

.VueCarousel-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing:border-box;
}

Vue Carouselの提供ページ

カルーセルのサンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。