モバイルタッチスライダー「vue-awesome-swiper」の使い方

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.0.2/css/swiper.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@5.0.2/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.3/dist/vue-awesome-swiper.min.js"></script>
<div id="app">
  <swiper :options="swiperOption1" ref="mySwiper1">
    <swiper-slide v-for="(item, index) in items" :key="index">{{item.title}}</swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

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

.swiper-container {
  height: 300px;
  width: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  background-color: #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-left:1px solid #fff;
}

Vue

const VueAwesomeSwiper = window.VueAwesomeSwiper;

Vue.use(VueAwesomeSwiper);

let items = [];
for(let i=1; i<=5; i++)
{
  items.push({
    no: i,
    title: 'title' + i
  });
}

let app = new Vue({
  el: '#app',
  data: {
    items:items,
    swiperOption1: {
      autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
      pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    },
  }
});