vue中使用swiper

首先，下载安装swiper

npm i swiper@5.4.5

为什么用5.4.5呢，我也不知道，听同事说有几个版本有bug，这个他们用的还可以，所以我也用了 > . <

main.js中引入

// swiper
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper /* { default options with global component } */);

需要写轮播的页面

<!-- 轮播图 -->
    <div class="Rotation">
      <div class="header-swiper">
        <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <!-- 分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 前进后退按钮 -->
          <div class="swiper-button-next" slot="pagination"><img src="../../assets/you.png"></div>
          <div class="swiper-button-prev" slot="pagination"><img src="../../assets/zhuo.png"></div>
        </swiper>
      </div>
    </div>
    <!-- 轮播图 -->

export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};

/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 350px;
}
.swiper-slide {
  /* width: 50% !important; */
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(1);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1.5);
  z-index: 9;
}

.swiper-slide img {
  width: 100%;
}

.swiper-button-prev{
  left: 30px;
  right: auto;
}

.swiper-button-prev:after{
  content:'none'
}

.swiper-button-next{
  right: 30px;
  left: auto;
}

.swiper-button-next:after{
  content:'none'
}
/* 轮播图 */

效果图