- sitio web oficial chino del parámetro api
- Descargar e importar el proyecto
// 安装
npm i vue-awesome-swiper@4.1.1 --save
npm i swiper@5.4.5 --save
// main.js引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
// vue文件使用
<swiper :options="swiperOption" ref="mySwiper" class="swiper" @slideChange="handleSlideChange">
<swiper-slide class="swiper-slide" v-for="item, index in list" :key="item.id">
<!-- content -->
</swiper-slide>
</swiper>
<!-- 轮播图切换按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
// swiperOption部分参数
swiperOption: {
direction: 'horizontal', // horizontal vertical
initialSlide: 0,
// width: 1200, // swiper宽
// height: 400, // swiper高
slidesPerView: 1.2, // 容器内显示数量
centeredSlides: true, // 居中内容
spaceBetween: 20,
// loop: true, // 重置首页
// speed: 500,
observer: true, // 更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）并触发 observerUpdate 事件
observeParents: true, // 将动态检查器(Mutation Observer)应用于Swiper 的所有祖先元素。当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper 并触发 observerUpdate 事件。
// observeSlideChildren: true,
grabCursor: true, // 鼠标形状，手形 类似cursor: pointer
// autoplay: {
// delay: 2000,
// disableOnInteraction: false // 拖动后不取消autoplay
// },
keyboard: true, // 键盘左右按键切换
effect: 'coverflow',
pagination: {
el: '.swiper-pagination'
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
}
},
// 切换轮博触发的slideChange方法
handleSlideChange () {
// 获取轮播对象
const swiper = this.$refs.mySwiper.$swiper;
// const currentIndex = swiper.activeIndex; // 当前轮播图index
// this.$refs.mySwiper.$swiper.slideTo(1) // 跳转至第1个
},