vue2.0使用swiper组件实现轮播的示例代码

1、安装swiper

npm install swiper@3.4.1 --save-dev

2、引用组件

import Swiper from \'swiper\';
import \'swiper/dist/css/swiper.min.css\';

3、html页面代码

 <div class=\"swiper-container\" id=\"swiper\">
  <div class=\"swiper-wrapper\">
   <div class=\"swiper-slide\" v-for=\"(item,$index) in detail.imgs\">
   <a v-on:click=\"showPreview($index,detail.imgs,swiperObj)\">
    <figure class=\"wp-avatar banner\">
    <img v-cloak :src=\"item | toQiNiuImg\"/>
    </figure>
   </a>
   </div>
  </div>
  <!-- Add Pagination -->
  <div class=\"swiper-pagination\"></div>
  </div>

4、初始化组件，并设置参数

 setTimeout(function () {
  state.swiperObj = new Swiper(\'#swiper\', {
  loop: true,
  pagination: \'.swiper-pagination\',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

5、搞定，ok

以上这篇vue2.0使用swiper组件实现轮播的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。