swiper图片怎么插

Swiper是一个流行的JavaScript轮播库，用于创建响应式的触屏滑动幻灯片。要在网页上使用Swiper插入图片，首先你需要从Swiper官网下载库文件（js和css），然后按照以下步骤操作：

1. **HTML结构**:

<div class="swiper-container">
   <div class="swiper-wrapper">
      <!-- 这里会放置你的图片 -->
      <div class="swiper-slide"><img src="image1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="image2.jpg" alt=""></div>
      <!-- 添加更多图片... -->
   </div>
</div>

2. **CSS样式**:
确保给`.swiper-container`、`.swiper-wrapper`和`.swiper-slide`应用相应的样式。

3. **JavaScript初始化**:
在页面的脚本部分引入Swiper.js库，并初始化Swiper组件：

<script src="swiper.min.js"></script>
<script>
   var swiper = new Swiper('.swiper-container', {
       // 设置选项，如自动播放、导航等
       autoplay: {
           delay: 3000, // 滑动间隔时间 (毫秒)
       },
       navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       }
   });
</script>

在这个例子中，`.swiper-button-next`和`.swiper-button-prev`是你可能需要添加的按钮，以便用户手动切换幻灯片。