vue-awesome-swiper组件使用

vue项目轮播图使用vue-awesome-swipe组件

注意：安装后可在package.json中查看安装的版本，有一个容易入坑的地方是swiper.css这个文件，因为版本不同，有的版本swiper.css位于node_modules下，不需要单独引入

1.命令行安装

npm install vue-awesome-swiper --save

2.在main.js中引入，一定要引入样式

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';

Vue.use(VueAwesomeSwiper);

详细代码如下，如嫌页面代码繁琐，可将部分代码放js里

页面代码：（如果不想要前后两个箭头，把div prev和next 注释掉就ok）

<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide>tab1</swiper-slide>
 <swiper-slide>tab2</swiper-slide>
 <swiper-slide>tab3</swiper-slide>
 <swiper-slide>tab4</swiper-slide>
 <!-- Optional controls -->
 <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>

js代码：注意

需要轮播图自动播放时，autoplay：true

需要轮播图下面的小点时： 

 pagination: { 
          el: '.swiper-pagination',
          clickable: true,
  }

需要前后箭头：

prevButton:'.swiper-button-prev'

nextButton:'.swiper-button-next'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data() {
    return {
      swiperOption: {
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        autoplay: true,
        effect:"coverflow",
        grabCursor : true,
        setWrapperSize :true,
        paginationType:"bullets",
        pagination: { 
          el: '.swiper-pagination',
          clickable: true,
        },
        paginationClickable :true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        mousewheelControl : true,
        observeParents:true
      }
    }
  }
}

 附个demo图片 ，自己写个好看点的样式就可以了