【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の提供ページ

カルーセルのサンプル