vuecli中使用swiper插件实现轮播图

1. npm下载swiper和vue-awesome-swiper依赖

"swiper": "^4.5.1", "vue-awesome-swiper": "^4.1.1",

2. 在需要实现轮播图的组件内引入Swiper、SwiperSlide组件和css文件

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

3. 在components中声明引入的Swiper、SwiperSlide组件

components: {
    Swiper,
    SwiperSlide,
  },

4. 轮播图html结构

<swiper
  :options="swiperOption_winnerList"
  class="winner_swiper"
  ref="winnerSwiper"
>
  <swiper-slide
    class="winner_slide innerCenter"
    v-for="item in winnerList"
    :key="item.id"
  >
    恭喜
    <span>186xxxxxxxx</span>
    获得了
    <span>xxxxxxxx</span>
  </swiper-slide>
</swiper>

5.data中写轮播图配置

swiperOption_winnerList: {
   direction: "vertical",
   slidesPerView: "auto",
   //自动切换
   autoplay: {
     delay: 0, //自动切换时间间隔
     stopOnLastSlide: false, //切换到最后一个slide时 不会 自动停止
     disableOnInteraction: false, //用户操作swiper后自动切换不会停止 每次都会重新启动
   },
   centeredSlides: true,
   allowTouchMove: false, //不允许触摸滑动
   spaceBetween: 10,
   loop: true,
   watchSlidesProgress: true,
   speed: 2000, //切换速度
 },