【Mac】Vueカルーセルコンポーネント「Hooper」を使う

ドキュメント

https://baianat.github.io/hooper/getting-started.html

インストール

Macターミナル

npm install hooper

vueコンポーネント

HooperSample.vue

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

<script>
import 
    Hooper,
    Slide,
    Progress as HooperProgress,
    Pagination as HooperPagination,
} from 'hooper';
import 'hooper/dist/hooper.css';

export default {
    name: 'App',
    components: {
      Hooper,
      Slide,
      HooperProgress,
      HooperPagination,
    }
  };
</script>