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

# やりたいこと
![hopper_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/b6a65636-ecbb-03a1-792d-01f7a078ed3e.gif)

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

# Hooperのinstall

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

- 導入手順
`yarn add hooper`

# HooperComponentsの呼び出しと設定

- これだけで基本的にカルーセルが実装可能
- 設定値やイベント等については **[公式ドキュメント](https://baianat.github.io/hooper/api.html)** で確認できる

```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>
```

## 実行してみる
![simple_hooper.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/b5804ac5-da8c-eb67-acfa-6b7c0c9bac5a.gif)

# イベント

 - Hooperの`@slide`イベントから、「最後のスライドになったらPaginationとNavigationを隠してボタンを表示する」を実装してみる
 - そのほかのイベントについは **[公式ドキュメント](https://baianat.github.io/hooper/api.html)** で確認できる

```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>
```

## 実行してみる
![button_hooper.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/baa4d495-0b1f-6a30-6382-58fa7cf6c040.gif)

# 所管

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

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