最开始我用的官方的swiper,发现切换失效,左右切换及导航器都是异常!最后选择使用vue-awesome-swiper插件。

vue安装使用swiper插件实现轮播图效果采坑笔记!-Qui-Note

1.安装swiper

npm install vue-awesome-swiper --save

2.main.js中引用

import 'swiper/swiper.less'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.html使用组件

<swiper :options="swiperOption">
   <swiper-slide>slide1</swiper-slide>
   <swiper-slide>slide2</swiper-slide>
   <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>
</swiper>

4.data中设置组件数据
 

swiperOption: {
  autoplay: {
    delay: 3000,
    disableOnInteraction: false // 手动切换之后继续自动轮播
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
      pagination: {
    el: '.swiper-pagination',
    clickable: true // 允许点击小圆点跳转
  }
}

 

常见问题:

1.swiper不会自动滚动,左右切换失效,版本不兼容,降到版本,从新启动项目即可。
解决方式:
npm uninstall vue-awesome-swiper --save
npm install vue-awesome-swiper@3.1.3 --save

2.swiper-pagination导航器不显示

pagination: {
          el: '.swiper-pagination'
}

网上大多数教程再说,直接配置的问题,其实我已经配置,最后折磨我了好久发现,这个版本的swiper的css是单独的!需要引入导航器的css:swiper-bundle.min.css,真是一句“窝草”。

解决办法:

在main.js引入

import 'swiper/swiper-bundle.min.css'

插件:

中文swiper:https://www.swiper.com.cn/api/start/new.html
国外swiper:https://swiperjs.com

vue-awesome-swiper版:https://github.com/surmon-china/vue-awesome-swiper/

终于搞定了vue轮播图的插件了,一步一坑,学习来真费劲!拒绝无效代码,做高效分享 —— 我是陈小知。