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