Vue.jsの画像やコンテンツのスマホ対応に適したカルーセルスライダー「vue-flickity-2」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-flickity-2.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-flickity-2.umd.min.js"></script>
<div id="app">
  <div key="flickity">
    <flickity
      :options="flickityOptions"
      ref="flickity"
      @dragMove="dragMove"
      @init="api=$event.flickityApi"
    >
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.carousel-cell {
  width:250px;
  height: 150px;
  background-color: #62caaa;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: 2px solid #fff;
  font-size: 30px;
  border-radius: 10px;
}

Vue

const Flickity = window['vue-flickity-2'];

new Vue({
  el: '#app',
  components: {
    'flickity':Flickity
  },
  data: {
    flickityOptions: {
      "autoPlay": 5000,
      "pageDots": true,
      "resize": true,
      "prevNextButtons": true,
      "wrapAround": true,
    },
    api: {},
  },
  methods: {
    dragMove(event, pointer, moveVector) {
      console.log(event, pointer, moveVector);
    },
  }
});