Vue.jsでHooperを使って簡単にカルーセルを実装する

やりたいこと

• Hopperを使って簡単にPaginationとNavigation付きのカルーセルを実装する
• 最後のスライドに移動したらPaginationとNavigationを決してボタンを表示する

Hooperのinstall

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

• 導入手順
  yarn add hooper

HooperComponentsの呼び出しと設定

• これだけで基本的にカルーセルが実装可能
• 設定値やイベント等については 公式ドキュメント で確認できる

HooperSample.vue

<template>
  <div class="hooper-sample">
    <hooper class="hooper-sample__hooper" :settings="hooperSettings">
      <slide class="hooper-sample__slide">
        Hooperを<br>
        使って
      </slide>
      <slide class="hooper-sample__slide">
        簡単に<br>
        カルーセルを
      </slide>
      <slide class="hooper-sample__slide">
        実装してみる
      </slide>
      <slide class="hooper-sample__slide">
        最後のスライドは<br>ボタンだけを表示する
      </slide>
      <hooper-pagination slot="hooper-addons" />
      <hooper-navigation slot="hooper-addons" />
    </hooper>
  </div>
</template>

<script>
  import {Hooper, Slide, Pagination as HooperPagination, Navigation as HooperNavigation} from 'hooper';

  export default {
    components: {
      Hooper,
      Slide,
      HooperPagination,
      HooperNavigation,
    },
    data() {
      return {
        hooperSettings: {
          itemsToShow: 1,
          centerMode: true,
          wheelControl: false,
        },
      }
    }
}
</script>

<style lang="scss">
  .hooper-sample {
    background-color: #d5d5d5;
    text-align: center;

    &__hooper {

    }

    &__slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }
</style>

実行してみる

イベント

• Hooperの@slideイベントから、「最後のスライドになったらPaginationとNavigationを隠してボタンを表示する」を実装してみる
• そのほかのイベントについは 公式ドキュメント で確認できる

HooperSample.vue

<template>
  <div class="hooper-sample">
    <hooper class="hooper-sample__hooper" :settings="hooperSettings" @slide="slide">
      <slide class="hooper-sample__slide">
        Hooperを<br>
        使って
      </slide>
      <slide class="hooper-sample__slide">
        簡単に<br>
        カルーセルを
      </slide>
      <slide class="hooper-sample__slide">
        実装してみる
      </slide>
      <slide class="hooper-sample__slide">
        最後のスライドは<br>ボタンだけを表示する
      </slide>
      <hooper-pagination slot="hooper-addons" v-if="!isLastSlide"/>
      <hooper-navigation slot="hooper-addons" v-if="!isLastSlide"/>
    </hooper>
    <button v-if="isLastSlide" class="hopper-sample__button">
      ボタン
    </button>
  </div>
</template>

<script>
  import {Hooper, Slide, Pagination as HooperPagination, Navigation as HooperNavigation} from 'hooper';

  const SLIDE_COUNT = 3

  export default {
    components: {
      Hooper,
      Slide,
      HooperPagination,
      HooperNavigation,
    },
    data() {
      return {
        hooperSettings: {
          itemsToShow: 1,
          centerMode: true,
          wheelControl: false,
        },
        currentSlide: 0,
      }
    },
    computed: {
      isLastSlide() {
        return this.currentSlide >= SLIDE_COUNT
      },
    },
    methods: {
      slide({currentSlide}) {
        this.currentSlide = currentSlide;
      }
    },
  }
</script>

<style lang="scss">
  .hooper-sample {
    background-color: #d5d5d5;
    text-align: center;

    &__hooper {

    }

    &__slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }
</style>

実行してみる

所管

超簡単にナビゲーションアイテム付きのカルーセルが実装可能でした！
イベントを使えばSlideをトリガーに何かを行うことも可能なので、お手軽に実装したい場合は便利でした。

結局使ってて一番詰まったのは、Hooper内のスタイリングのリセットだった