1.安装:npm install vue-awesome-swiper --save
2.局部引入:
import "swiper/dist/css/swiper.css"; import { swiper, swiperSlide } from "vue-awesome-swiper"; components: { swiper, swiperSlide }, 3.使用: <!-- 轮播图 --> <div class="swiper"> <swiper :options="swiperOption" class="swiper-container"> <!-- slides --> <swiper-slide class="swiper-item" v-for="item of swiperList" :key="item.id"> <img class="swiper-img" :src="item.imgUrl" /> </swiper-slide> <!-- 显示小点--> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> <!-- 轮播图 --> data() { return { swiperOption: { pagination: { el: ".swiper-pagination", clickable: true //点击小圆点 }, notNextTick: true, loop: true, //循环 speed: 1000, autoplay: true // grabCursor: true //小手掌抓取滑动 }, //三张轮播,使用变量循环 swiperList: [ { id: "001", bg: "white", imgUrl:"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/1550974453867424.jpg" }, { id: "002", bg: "red", imgUrl: "https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/597831022050017280.jpg" } ] }; }