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

2019年6月17日

Hooperとは

 

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

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

 

環境

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

vue.js 2.6.10
hooper 0.2.1

 

ライブラリの取得

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

npm

npm install hooper

yarn

yarn add hooper

CDN


<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の場合を非検証

Default 説明
itemsToShow 1 ビューごとに表示されるアイテムの数(端数にすることもできます)
itemsToSlide 1 ナビゲーションボタンを使用するときにスライドするアイテムの数。
initialSlide 0 最初のスライドのインデックス番号。
infiniteScroll false 無限スクロールモードを有効にします。
centerMode false センターモードを有効にします。
vertical false 垂直スライドモードを有効にします。
rtl null RTLモードを有効にします。
mouseDrag true マウスのドラッグを切り替えます。
touchDrag true タッチドラッグを切り替えます。
wheelControl true マウスホイールのスライドを切り替えます。
keysControl true キーボードコントロールを切り替えます。
shortDrag true スライドを確定するための移動を有効にします。
autoPlay false カルーセルへの自動スライドを有効にします。
playSpeed 2000 スライドをトリガーする自動再生の速度(ミリ秒)。
transition 300 スライディング遷移時間(ミリ秒)。
sync '' 2つのカルーセルを同期させて一緒にスライドさせます。
hoverPause true マウスがスライドに入ったら自動再生を一時停止します。
trimWhiteSpace false 完全に空のスライドスペースがなくなる場合にのみ、カルーセルのスライドを制限します。
settings { } すべての設定を渡すためのオブジェクト

 

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

 

まとめ

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

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

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

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

-vue.js
-, ,