使用教程:https://github.com/cynthiawupore/vue-awesome-swiper
实例:
<template> <div class="index"> <swiper :options="swiperOption" class="swiper-box" ref="mySwiper"> <swiper-slide class="swiper-item"> <img src="../assets/images/bg1.png" alt="" class="w100"> </swiper-slide> <swiper-slide class="swiper-item"> <img src="../assets/images/bg2.png" alt="" class="w100"> </swiper-slide> </swiper> </div> </template> <script> import Vue from 'vue' import { swiper, swiperSlide } from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css') //注意这里 export default { name: 'index', components: { swiper, swiperSlide }, data() { return { swiperOption: { notNextTick: true, loop:true, initialSlide:0, autoplay: 3000, direction : 'horizontal', grabCursor : true, onSlideChangeEnd: swiper => {} } } }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted() { this.swiper.slideTo(0, 0, false); } } </script>