共计 1584 个字符,预计需要花费 4 分钟才能阅读完成。
1、装置依赖
装置依赖须要留神:npm i vue-awesome-swiper swiper@5.4.5 | |
// vue-awesome-swiper^4.1.1 swiper^5.4.5 |
2、组件应用
<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> |
正文完
发表至: javascript
2021-10-22