Vue.jsでカルーセルスライダーを使うなら「hooper」が良さげ

Hooperとは

「Hooper」はVue用に最適化され、カスタマイズ可能なカルーセルスライダーです。

タッチ、キーボード、マウスホイール、およびナビゲーションのサポートを行っています。
またレスポンシブ対応、垂直方向のスライドにも対応しています。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm install hooper

yarn add hooper

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/hooper.css">

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

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

導入手順

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

webpack等の場合

import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';

export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    }
  }

WEBページの場合

new Vue({
  el: "#app",
  components: {
      Hooper: window.Hooper.Hooper,
      Slide: window.Hooper.Slide
  }
})

2. テンプレートを準備

スライド全体を<hooper>で囲みます。
スライドするの要素を<slide>で囲みます。

<div id="app">
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
  </hooper>
</div>

3. CSSを設定

デフォルトですと、スライドにCSSが存在しないので、サンプルで下記のスタイルを適用します。

.hooper-slide {
    background-color: #62caaa;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 2px solid #fff;
    font-size: 30px;
    border-radius: 10px;
  }

デモ

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

プロパティ

設定例

webpack等の場合

<hooper :autoPlay="true" :playSpeed="3000">

WEBページの場合

<hooper :auto-play="true" :play-speed="3000">

一覧

WEBページで利用する場合は、ケバブケースにする必要があります。
※webpackの場合を非検証

プロパティのドキュメントはこちら

まとめ

Vue.jsでSliderを実装する「hooper」でした。

簡単に実装できる割には、機能が豊富で使いやすいです。

今日はこの辺でー