割と使われているカルーセルスライダー「vue-carousel」を使ってみた

2019年10月7日

割と使われているカルーセルスライダー「vue-carousel」を使ってみた

vue-carouselとは

vue-carouselは、Vue.js製のカルーセルスライダーを実装するコンポーネントライブラリです。

Githubのスターが1000を超えていいて、Used byも3000超えているので割と使われているライブラリです。
オートプレイはもちろん、ページネーションの設定を行うことも可能です。

 

割と使われているカルーセルスライダー「vue-carousel」を使ってみた

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm install vue-carousel

yarn

yarn add vue-carousel

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-carousel.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/SSENSE/vue-carousel

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import VueCarousel from 'vue-carousel';

(2)WEBページの場合

const VueCarousel  = window.VueCarousel.default;

2.メソッドを設定

今回のサンプルは、 Vue.use を使ったグローバルで行う。
ローカルで行う場合はコンポーネントに取り込む。

Vue.use(VueCarousel);

let app = new Vue({
  el: '#app'
});

3. テンプレートを準備

オプション設定<carousel> にする。

今回のサンプルは適当に10枚のスライドを準備する。
<slide> に直接スタイルを適用するとスライド幅に影響を与えてズレてしまうので、内部にタグを持たせてそちらにスタイルを適用する。

<div id="app">
  <carousel autoplay="true" loop="true" >
    <slide v-for="n in 10">
      <div class="slider-inner">
          Slide {{n}} Content
      </div>
    </slide>
  </carousel>
</div>

4. スタイル

専用のスタイルが用意されていないので、サンプルとして下記のスタイルを適用します。

.VueCarousel{
  height: 300px;
}
.VueCarousel-wrapper, .VueCarousel-inner, .VueCarousel-slide{
  height: 100% !important;
}
.VueCarousel-slide .slider-inner {
  height: 100%;
  background-color: #62caaa; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: #fff; 
  border: 2px solid #fff;
  font-size: 30px; 
  border-radius: 10px;
}

サンプル

>>専用ページで確認する

 

さいごに

Vue.js製のカルーセルスライダーを実装するコンポーネントライブラリでした。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,