導入の経緯

これまで弊社のRuby on Railsで製作されたプロダクトではスライダーライブラリとしてswiper.jsを用いており、新しくnuxt.jsで製作したものでも流れでswiperをvue向けに扱えるようにしたvue-awesome-swiperを用いてきました。しかし、最近になってページスピードを詰めていくとvue-awesome-swiperにはいくつも欠点が見つかりました。

Globallyにしかswiperをimportすることができない
SSRに対応していない
ファイルサイズが大きい
やりたいことによってはbackground-imageで画像を表示するしかなく画像のlazyloadingなどができない

これらの問題を受け、当初はvue-awesome-swiperをいじって解決することや、生のswiperに書き換えることを考えましたが、少し探してみたらvue向けに作られたHooperという優秀なライブラリを発見したため、こちらに鞍替えすることにしました。そこで導入手順などを簡単に記載します。

Hooperの何がいいか

単なるComponentとしてimportすればすぐに使えて導入が非常に簡単
SSR対応
swiper.jsよりもかなりファイルサイズが小さい
infinite loop, thumbnail pagination, responsive designなど様々なカスタマイズが可能

vueでよく用いられるスライダーライブラリとして他にvue-carouselがありましたが、そちらはinfinite loopが実現できなかったため今回は採用を見送りました。

Hooperの欠点

新しすぎて情報が少ない

GitHubを見る限り公開されてから一年も経っていないようです。これから導入事例と共に情報が増えていくことを期待しています。

swiperほどたくさんの機能を備えていない

今回実現したいことを実装するのには充分な機能を備えていましたが、超リッチなスライダーを作りたいときにはswiperの方がやれることは多いです。しかし発火するイベントを拾ってきて独自の動きを作ればある程度はHooperで対応できると思います。

Hooper導入方法

今回はNuxt.jsのプロジェクトに導入しましたがvueで動いていれば同様の方法でどんなプロジェクトにも導入できるはずです。

package.jsonにHooperを追加、インストール

yarn addでもnpm installでもなんでもいいです

"dependencies": {
  "hooper": "^0.3.4"
}

Vue Component内でimportする

<script>
import { Hooper, 
         Slide,
         Pagination as HooperPagination, // ページネーションが必要なときにimport
         Navigation as HooperNavigation  // 左右のナビゲーションが必要なときにimport
        } from 'hooper'
import 'hooper/dist/hooper.css' // hooperのcssを適用
export default {
  components: {
    Hooper,
    Slide,
    HooperPagination,
    HooperNavigation
  }
}
</script>

これだけで準備が整います。

使用方法

公式の実装例に様々なスライダーの例が掲載されています。

<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
    <slide>
      slide 6
    </slide>
    <hooper-pagination slot="hooper-addons"></hooper-pagination>
  </hooper>
</template>

設定

スライドスピードやページごとに表示する要素の個数を変更したい場合にはhooperComponentにそれぞれのoptionのpropsを渡すか、settingsにオプションをまとめたobjectを渡します

<template>
  <hooper :settings="hooperSettings"></hooper>
  または
　<hooper :items-to-show="1" :center-mode="true"></hooper>
</template>

<script>
export default {
  // 省略
  data() {
    return {
      hooperSettings: { 
        itemsToShow: 1, // 1ページに表示したい要素の個数
        centerMode: true, // 現在の要素を中央に表示するか
        breakpoints: { // breakpointを用いたいときはsettingsでまとめないとうまく渡せない
          480: {
            itemsToShow: 1.75 // 小数点以下の値も指定できる
          },
          640: {
            itemsToShow: 2.3
          }
        }
      }
    }
  }
}
</script>

設定について詳しく知りたい場合は公式のAPIガイドをご覧ください

swiperからの移行で少し詰まったところ breakpoint指定

上記の例でbreakpointを指定してwidthごとにoptionを切り替えましたが、この時の指定方法がswiperと違って少し戸惑いました。

hooperでは上記のように指定すると幅が

0~480px => 1要素
480~640px => 1.75要素
640px~ => 2.3要素

のようにoptionが切り替わります。swiperとは真逆の指定方法なので最初少し詰まりました。

まとめ

Hooperの導入方法と使用例を簡単にですがご紹介しました。最近ページスピードをかなり重視するようになってきているので、このような軽量で扱いやすいライブラリは非常におすすめできると思います。

参考

Hooper 公式 https://baianat.github.io/hooper/

Nuxt.jsでVue用スライダーライブラリ Hooperを導入