vue项目中使用swiper.js做一个轮播图

先看效果：

安装swiper时，指定版本号5.4.5；否则分页器可能不显示：npm install swiper@5.4.5

在main.js文件中添加；import 'swiper/css/swiper.min.css'

<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../assets/a.png" alt="" srcset="" /></div>
        <div class="swiper-slide"> <img src="../../assets/b.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../../assets/c.png" alt="" srcset="" /></div>
        <div class="swiper-slide"><img src="../../assets/d.png" alt="" srcset="" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script> 
import Swiper from "swiper";
export default { 
  data() {
    return {};
  }, 
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      direction: "horizontal",
      loop: true,
      slidesPerView: "auto",
      spaceBetween: 20,
      centeredSlides: true,
      observeParents:true,
      observer:true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable:true,
      },
    });
  },
  methods: {},
};
</script>
<style lang="css" scoped>
.swiper-container {
  margin-top: 0.2rem;
  width: 100%;
  /* height: 4rem; */
  overflow: visible !important;
  position: relative;
  --swiper-pagination-color: rgba(90, 184, 239, 1);
} 
.swiper-container .swiper-wrapper .swiper-slide {
  width: 2.5rem;
  border-radius: 0.12rem;
} 
.swiper-container .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  border-radius: 0.12rem;
} 
.swiper-container .swiper-wrapper .swiper-slide-prev {
  margin-top: 0.12rem;
  height: 4rem !important;
  position: relative;
}
.swiper-container .swiper-wrapper .swiper-slide-prev:before {
   content:"";
   height:100%;
   width:100%;
   background:rgba(0, 0, 0, .3);
   position: absolute;
   top:0;
   right:0;
  border-radius: 0.12rem;
  z-index: 1000;
} 
.swiper-container .swiper-wrapper .swiper-slide-prev img {
  height: 100%;
  position: absolute;
  z-index: 0;
} 
.swiper-container .swiper-wrapper .swiper-slide-next {
  margin-top: 0.182rem;
  height: 4rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next:before {
   content:"";
   height:100%;
   width:100%;
   background:rgba(0, 0, 0, .3);
   position: absolute;
   top:0;
   right:0;
  border-radius: 0.12rem;
  z-index: 1000;
}

.swiper-container .swiper-wrapper .swiper-slide-next img {
  height: 100%;
} 
.swiper-container .swiper-wrapper .swiper-slide-active {
  width: 2.5rem;
  height: 4.36rem !important; 
} 
.swiper-pagination {
  bottom: -0.3rem !important;
  height:20px;
}
 
</style>