vueではどのように輪播図を書くか

手順:1.vue-awesome-swiperのインストール

npm install vue-awesome-swiper -S 

2.vueプロジェクトでvue-awesome-swiperを参照

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

   vue     ：

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  }
}

3 、 .vueファイルのhtml

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    
    <swiper-slide>I'm Slide 1swiper-slide>
    <swiper-slide>I'm Slide 2swiper-slide>
    <swiper-slide>I'm Slide 3swiper-slide>
    <swiper-slide>I'm Slide 4swiper-slide>
    <swiper-slide>I'm Slide 5swiper-slide>
    <swiper-slide>I'm Slide 6swiper-slide>
    <swiper-slide>I'm Slide 7swiper-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>
template>

4、.vueファイルのscriptラベルの内容

  export default {
    name: <span class="hljs-string">'carrousel'</span>,
    data() {
      <span class="hljs-keyword">return</span> {
        swiperOption: {
          // some swiper options/callbacks
          //        swiper    api   
          // <span class="hljs-keyword">...</span>
          pagination: {
            el: <span class="hljs-string">'.swiper-pagination'</span>
          },
          navigation: {
            nextEl: <span class="hljs-string">'.swiper-button-next'</span>,
            prevEl: <span class="hljs-string">'.swiper-button-prev'</span>
          }
        }
      }
    },
    computed: {
      swiper() {
        <span class="hljs-keyword">return</span> this.$refs.mySwiper.swiper
      }
    }
  }