vue Nuxtにスワイプ/スライドのアクションを導入する

Home › Memo › Nuxtにスワイプ/スライドのアクションを導入する

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます

vue-awesome-swiper と swiperを入れる

$ npm install swiper vue-awesome-swiper –save

plugins/vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.min.css'

Vue.use(VueAwesomeSwiper)

<div class="p-picture">
   <swiper :options="swiperOption">
       <swiper-slide v-for="picture in pictures" :key="picture.id">
          <img :src="picture.display_url">
       </swiper-slide>
       <div class="swiper-button-prev" slot="button-prev"></div>
       <div class="swiper-button-next" slot="button-next"></div>
   </swiper>
</div>

...

data() {
    return {
      srcUrl: 'https://image.biccamera.com/img/00000006695796_A01.jpg',
      download_url: '',
      download_file_name: '',
      displayPicture: {},
    };
  },