vue2中使用swiper组件库

// 安装
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个
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值