swiper组件实现静止轮播图左右拖动

Swiper是一个非常流行的JavaScript库，用于创建响应式的触控滑块，包括轮播图、幻灯片展示等。如果你想实现静态轮播图的左右拖动效果，Swiper可以提供这样的功能。通常，你可以按照以下步骤设置：

1. **引入 Swiper 库**：首先，在HTML中引入Swiper的CSS和JS文件。

<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

2. **初始化 Swiper 组件**：然后，在需要轮播图的容器上创建一个新的Swiper实例，设置必要的配置。对于静态模式，`autoplayDisableOnInteraction` 和 `slideToClickedSlide` 参数很有用，它们可以让轮播停止当用户交互时，并允许点击直接跳转到对应项。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 图片或内容 -->
  </div>

  <div class="swiper-pagination"></div> <!-- 如果有分页器 -->

  <button class="swiper-button-prev"> prev </button>
  <button class="swiper-button-next"> next </button>
</div>

<script>
var swiper = new Swiper('.swiper-container', {
  autoplay: {
    disableOnInteraction: true,
  },
  slideToClickedSlide: true,
  navigation: {
    buttons: {
      prev: '.swiper-button-prev',
      next: '.swiper-button-next',
    }
  },
});
</script>

3. **样式调整**：为了禁止轮播滚动，可以在CSS中添加 `.swiper-container` 的 `touch-action: none;` ，并自定义左右按钮的样式。