JavaScript、 Swiper 技术实现5张图片的轮播图

Swiper是一个流行的JavaScript库，用于创建响应式的触摸滑动幻灯片或轮播图。要在HTML中使用Swiper实现五张图片的轮播效果，首先你需要在你的项目中引入Swiper的CSS和JS文件。以下是一个简单的步骤说明：

1. **HTML结构**:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(image1.jpg)"></div>
    <div class="swiper-slide" style="background-image: url(image2.jpg)"></div>
    <div class="swiper-slide" style="background-image: url(image3.jpg)"></div>
    <div class="swiper-slide" style="background-image: url(image4.jpg)"></div>
    <div class="swiper-slide" style="background-image: url(image5.jpg)"></div>
  </div>
  <!-- 添加导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

2. **添加样式**:

.swiper-container {
  width: 100%;
  height: 400px; /* 你可以自定义高度 */
}

/* 可选：添加圆点指示器 */
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

3. **JavaScript初始化Swiper**:

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    loop: true, // 设置无限循环模式
    autoplay: {
      delay: 3000, // 自动切换时间间隔（毫秒）
    },
    navigation: { // 导航按钮
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination', // 圆点指示器的位置
      clickable: true,
    },
  });
</script>