vue轮播插件--vue-awesome-swiper

第一步-安装

npm install vue-awesome-swiper --save

第二步-引用

/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

/*组件方式引用*/
import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否须要引入样式，以及具体位置。
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
     swiper,
     swiperSlide
   }
}

 第三步-用法

同其它组件同样，代码以下：

<template>
  <div>
   <swiper :options = "swiperOption" ref="mySwiper">
    <swiper-slide><img src="@/assets/logo.png"></swiper-slide>
    <swiper-slide><img src="@/assets/mistake.png" ></swiper-slide>
    <swiper-slide><img src="@/assets/correct.png" ></swiper-slide>
    <swiper-slide>i'm Slide 4</swiper-slide>
    <swiper-slide>i'm Slide 5</swiper-slide>
    <swiper-slide>i'm Slide 6</swiper-slide>
    <swiper-slide>i'm Slide 7</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>
    <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
   </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {    
        autoplay:{disableOnInteraction:false},//autoplay设置图片自动播放，disableOnInteraction:false是为了防止当用户触摸后，轮播失效，默认为true
        speed: 1000,
        loop: false,
        //图片下方分页设置，可设置类型type
        pagination: {
          el: ".swiper-pagination",
          type: "bullets"
        },
        //左侧和右侧按钮设置
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        //切换效果设置
        effect: "cube",
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        },
      }
    };
  },
</script>            

 

其余设置以及效果可参考

http://www.swiper.com.cn/api/pagination/299.html