vue 轮播图显示三张图片，图片居中显示

先上效果图

 

  

1.使用页面引入swiper.css和swiper.js

 // 引入swiper组件
  import Swiper from "swiper";
  import "swiper/dist/css/swiper.min.css";

2.html

<div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
         </div>
     </div>

3.css

 .swiper-container {
        margin-top: .1rem;
        width: 3.75rem;
        height: 2rem;
        overflow: visible !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide {
        width: 3.1rem;
        border-radius: 20px;
    }

    .swiper-container .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 2rem;
        border-radius: .1rem;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev img {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next img {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-active {
        width: 3.1rem;
    }

4.js

<script src="./js/swiper.js"></script>
<script>
    window.onload = function () {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            autoplay: 5000,
            slidesPerView: "auto",
            centeredSlides: true,
            spaceBetween: 10,
        })
    }
</script>