【Nuxt】軽量スライダープラグイン「Hooper」の使い方

スライダー実装、どうしてますか？ 自力で書いても良いけれど、やっぱりプラグインは便利。

vue-awesome-swiperやswiper、vue-carouselあたりが有名どころだと思いますが、今回はHooperというプラグインで実装してみたいと思います。

Hooperの良いところ

1. SSR対応

client-only（no-ssr）しなくて良い（ファーストビューにスライダーがある場合にgood）

良記事があったので一緒にぜひ：メルペイの事例に学ぶ、SSRとJAMstackのメリット・デメリット - ログミーTech

2. コンポーネントごとに呼び出せる

globalで呼ぶ必要がない、必要な部分でだけ使える

3. カスタマイズしやすい

シンプル、変に装飾が入っていないのでいじりやすい

4. infiniteScrollが自然

プラグインによってちょっと怪しい挙動をすることもあるけれど、これはスムーズ

5. 公式が分かりやすい

実例が載っているのですぐ理解できる、オプションも豊富

6. Vueフレームワークで作られていること

他のライブラリのwrapperではなく、Vue/Nuxtに最適化されている

実装例

インストールして、

$ npm i hooper

個別コンポーネントで使ってみます。

<template lang="pug">
  div
    Hooper(:settings="hooperSettings")

      Slide(v-for="slide in slides" :key="slide.id")
        span {{ slide.comment }}

      HooperNavigation(slot="hooper-addons")
      HooperPagination(slot="hooper-addons")
</template>

<script>
import {
  Hooper,
  Slide,
  Pagination as HooperPagination,
  Navigation as HooperNavigation
} from 'hooper'
import 'hooper/dist/hooper.css'

export default {
  components: {
    Hooper,
    Slide,
    HooperPagination,
    HooperNavigation
  },
  data () {
    return {
      slides: [
        {
          id: 1,
          comment: '1つめのスライド'
        },
        {
          id: 2,
          comment: '2つめのスライド'
        },
        {
          id: 3,
          comment: '3つめのスライド'
        }
      ],
      hooperSettings: {
        itemsToShow: 1,
        centerMode: true,
        infiniteScroll: true,
        breakpoints: {
          768: {
            itemsToShow: 2
          },
          1024: {
            itemsToShow: 3
          }
        }
      }
    }
  }
}
</script>

こんな感じで「v-deep」を使えばscopedでのカスタマイズもOK。

<style lang="scss" scoped>
.classA ::v-deep .classB {
  .hooper-indicator {
    background-color: #fff;
  }
}
</style>

以上です。

個人的には余計なmarginやpaddingが入っていないのでとっても助かり。おすすめです。