swiper轮播图

Swiper是一个流行的移动端轮播图插件，可以轻松地实现滑动、淡入淡出等效果。以下是一个简单的Swiper轮播图实现例子：

首先，在HTML中需要添加以下代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

然后，在CSS中添加以下代码：

.swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px 0;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

最后，在JavaScript中添加以下代码：

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

这个例子中，Swiper会自动循环播放三张图片，并且每张图片停留2秒钟。同时，下方也会显示分页器，可以点击切换图片。