dj-swiper

安装组件

npm i dj-swiper -S

代码中引用组件

import DjSwiper from 'dj-swiper/index.vue';

然后像使用自己定义的vue组件一样使用

<template>
  <div id="app">
    ...
    <dj-swiper></dj-swiper>
    ...
  </div>
</template>
 
...
components: {
   DjLoading
}
...

参数

props:
   uploadSwiper: false
      default: true
      是否加载 swiper.js 及 swiper.css 文件
   bannerData:[{
        img:'图片链接',
        url:'图片跳转链接' //可不传
   }]
       默认传入的轮播图片数组，非必传
   configInfo:{
       direction: 'horizontal', // 滑动方向  垂直：vertical
       speed: 2000,    // 滑动的速度
       autoplay: 2000, // 自动播放的时候间隔
       loop: true,     // 循环播放
       pagination: null, 不用分页符
                  //默认'.swiper-pagination' 有分页符
       height: ''  // 设置容器的高，默认图片自适应
   }
   pagination: function (mySwiper, index, className) {
     return '<li class="' + 'className' + '">' + '</li>'
   }
   自定义分页符函数，其中的className为自定义样式的class名称
   可以自定义html元素名称
 

插槽 支持自定义轮播模块

  <template :slot="'slideContent'">
    <div class="swiper-slide">第一页</div>
    <div class="swiper-slide">第二页</div>
  </template>
  插槽内每页内容需要加上class="swiper-slide"