vue swiper

git

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

swiper4

http://www.swiper.com.cn/

安装

npm install vue-awesome-swiper --save

全局

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件

// require styles
import 'swiper/dist/css/swiper.css'

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}

简单效果，页码大小不知道怎么能稍微大一点。。。

好吧

添加一个全局样式，覆盖之前的就行。。。

  .swiper-pagination-bullet{
    height: 20px;
    width: 20px;
  }

 <swiper :options="swiperOption">
    <swiper-slide v-for="i,index in imgs" :key="index">
    <img :src="i" class="img">
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
  </swiper>



 swiperOption: {
          // 两个页面之间的边距
          spaceBetween: 10,
          // 是否可以循环
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            // 页面标号是否可以低级
            clickable: true,
            // 动态动画效果
            dynamicBullets: true,

          }
        },

swiper中还可以是组件同样可以切换

 <swiper-slide v-for="i,index in items" :key="index">
      <component :is="i"></component>
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>