html怎么让轮播图居中,vue 轮播图显示三张图片，图片居中显示

先上效果图

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

// 引入swiper组件

import Swiper from "swiper";

import "swiper/dist/css/swiper.min.css";

2.html

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

window.onload = function () {

var mySwiper = new Swiper('.swiper-container', {

direction: 'horizontal',

loop: true,

autoplay: 5000,

slidesPerView: "auto",

centeredSlides: true,

spaceBetween: 10,

})

}

来源：https://www.cnblogs.com/fanqiuzhuji/p/13161409.html