vue-awesome-swiper基础使用

安装

npm install swiper vue-awesome-swiper

main.js注册使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

使用

<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-next" slot="button-prev"></div>
      <div class="swiper-button-prev" slot="button-next"></div>
</swiper>

  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
      },
    };
  },

  .swiper {
    height: 300px;
    font-size: 30px;
    line-height: 300px;
  }