vue2中使用swiper组件库

• api参数中文官网
• 下载并引入项目

// 安装
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个
},