安装

npm install swiper
npm install vue-awesome-swiper

使用

<template>
  <swiper ref="mySwiper" :options="swiperOption">
    <swiper-slide>
      <div class="swiper-slide1">1</div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-slide2">2</div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-slide3">3</div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-slide4">4</div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-slide5">5</div>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// 备注这里导入swiper的样式时，需要在node_modules/swiper中查找对应的样式，因为不同版本色swiper对应的样式文件位置不同
import "swiper/swiper-bundle.css";
export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      swiperOption: {
        loop: true,		// 循环回路
        slidesPerView: "auto",	// 设置slider容器能够同时显示的slides数量; 设置为auto则自动根据slides的宽度来设定数量
        centeredSlides: true,	// 设定为true时，active slide会居中，而不是默认状态下的居左
        spaceBetween: 30,	// 每个swiper-slide之间的间隔
      },
    };
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0px;
}

.swiper-container {
  overflow: visible !important;
  width: 80%;
  height: 300px;
}

/*
// swiper-slide-prev表示当前活跃的slide的前一个side
.swiper-container .swiper-wrapper .swiper-slide-prev {
  height: 284px !important;
}

 // swiper-slide-next表示当前活跃的slide的后一个side
.swiper-container .swiper-wrapper .swiper-slide-next {
  height: 284px !important;
} */

/*
// swiper-slide-active表示当前活跃的slide
.swiper-container .swiper-wrapper .swiper-slide-active {
  width: 100%;
} */

.swiper-slide1 {
  background-color: chartreuse;
  height: 200px;
  font-size: 30px;
}
.swiper-slide4 {
  background: darkmagenta;
  height: 200px;
  font-size: 30px;
}
.swiper-slide5 {
  background-color: darkslateblue;
  height: 200px;
  font-size: 30px;
}
.swiper-slide2 {
  background-color: chocolate;
  height: 200px;
  font-size: 30px;
}
.swiper-slide3 {
  background-color: darkblue;
  height: 200px;
  font-size: 30px;
}
</style>

踩坑点

// 备注这里导入swiper的样式时，需要在node_modules/swiper中查找对应的样式，因为不同版本色swiper对应的样式文件位置不同
import "swiper/swiper-bundle.css";

codesandbox.io/s/polished-…