swiper5张图居中轮播

你可以使用以下代码实现5张图居中轮播：

HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg"></div>
    <div class="swiper-slide"><img src="img2.jpg"></div>
    <div class="swiper-slide"><img src="img3.jpg"></div>
    <div class="swiper-slide"><img src="img4.jpg"></div>
    <div class="swiper-slide"><img src="img5.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

CSS样式：

.swiper-container {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.swiper-slide {
  text-align: center;
}
.swiper-slide img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
}
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

JavaScript代码：

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

这段代码使用了Swiper插件来实现轮播效果，其中`autoplay`设置了自动轮播，`loop`设置了循环播放，`pagination`设置了分页器。CSS样式中，使用了`text-align: center`使轮播图居中显示，同时使用了`transform: translateX(-50%)`使分页器水平居中显示。