swiper滑动显示下一个图片 html实现

Swiper是一个流行的JavaScript库，用于创建触屏优化的轮播图、幻灯片和响应式触摸滑块。要在HTML中使用Swiper来实现图片滑动显示下一张，你需要做以下几个步骤：

1. **引入Swiper库**：首先，在HTML文件中添加Swiper的CSS和JS文件链接。可以从官网下载压缩版本或通过CDN引用。

<link rel="stylesheet" href="https://unpkg.com/swiper@8/dist/css/swiper.min.css">
<script src="https://unpkg.com/swiper@8/dist/js/swiper-bundle.min.js"></script>

2. **设置基础结构**：创建一个包含几张`<img>`标签的容器，并给它一个ID，比如`swiper-container`。

<div id="swiper-container">
  <div class="swiper-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <!-- 更多图片... -->
  </div>
</div>

3. **初始化Swiper实例**：在JavaScript部分，找到你的`swiper-container`元素并初始化Swiper，指定选项如自动播放、循环等。

var swiper = new Swiper('#swiper-container', {
  loop: true, // 循环模式
  autoplay: { delay: 3000 }, // 自动播放，延迟3秒
  navigation: { // 导航控制
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
});

4. **按钮控制（可选）**：你可以添加上一张/下一张按钮来手动切换图片，只需创建对应的DOM元素，并绑定Swiper的事件。

<button class="swiper-button-prev">Previous</button>
<button class="swiper-button-next">Next</button>

<script>
document.querySelector('.swiper-button-prev').addEventListener('click', function() {
  swiper.previous();
});
document.querySelector('.swiper-button-next').addEventListener('click', function() {
  swiper.next();
});
</script>