1、装置依赖
装置依赖须要留神：npm i vue-awesome-swiper swiper@5.4.5// vue-awesome-swiper^4.1.1 swiper^5.4.52、组件应用
<template> <div> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class="swiper-slide" :key="banner" v-for="banner in banners"> <img :src="banner" /> </div> </div> <!-- 分页器 --> <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> </div> </div></template><script>/* 装置依赖须要留神：npm i vue-awesome-swiper swiper@5.4.5*/import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'// import 'swiper/swiper.min.css'import 'swiper/css/swiper.css'export default { components: { Swiper, SwiperSlide, }, directives: { swiper: directive, }, data() { return { banners: [ 'https://tse3-mm.cn.bing.net/th/id/OIP-C.4d7Emr_d4fJnEE6zK7pj_wHaFK?w=269&h=187&c=7&o=5&pid=1.7', 'https://tse4-mm.cn.bing.net/th/id/OIP-C.A8wmUvdmAGYci6lCCpv0XgFHC-?w=322&h=187&c=7&o=5&pid=1.7', 'https://tse1-mm.cn.bing.net/th/id/OIP-C.V2gX7ATUlbsW9CMuP_M_IgHaEK?w=333&h=187&c=7&o=5&pid=1.7', 'https://tse3-mm.cn.bing.net/th/id/OIP-C._8HHoEpyGFYXrGOlD3bGHAHaEK?w=281&h=180&c=7&o=5&pid=1.7', 'https://tse1-mm.cn.bing.net/th/id/OIP-C.9put7tRHT4xcPC6bOujzdwHaD9?w=294&h=180&c=7&o=5&pid=1.7', ], swiperOption: { pagination: { el: '.swiper-pagination', }, //设置点击箭头 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, autoplay: { delay: 2000, //当用户滑动图片后持续主动轮播 disableOnInteraction: false, }, slidesPerView: 3, // 张数 paginationClickable: true, spaceBetween: 15, // 间距 loop: true, }, } }, mounted() { this.mySwiper.slideTo(3, 1000, false) },}</script><style></style>