swiper.js 多个幻灯

Swiper.js 是一个流行的滑动组件库，它允许开发者创建响应式的、触摸友好的滑动效果，常用于图片轮播、产品展示等场景。当需要在 Swiper.js 中实现多个幻灯片组（即多个独立的滑动区域）时，可以通过以下步骤进行：

基础概念

Swiper 实例：每个 Swiper 幻灯片组都是一个 Swiper 实例，可以独立配置和控制。
容器：每个 Swiper 实例都需要一个容器元素，通常是一个 div，用于包裹幻灯片内容。
配置选项：Swiper 提供了丰富的配置选项，如 slidesPerView（每屏显示的幻灯片数）、spaceBetween（幻灯片之间的间距）等，可以根据需要进行设置。

实现多个幻灯片组的优势

模块化：每个幻灯片组可以独立管理，便于维护和复用。
灵活性：可以根据不同的布局需求，设置不同的幻灯片组。
性能优化：多个幻灯片组可以独立加载和渲染，有助于提高页面性能。

类型

横向滑动：最常见的幻灯片滑动方向。
纵向滑动：适用于特定的布局需求。
瀑布流布局：结合 Swiper 的网格布局功能，实现更复杂的布局。

应用场景

产品展示：多个产品系列或类别可以分别使用不同的幻灯片组。
新闻轮播：不同类别的新闻可以分别展示在不同的幻灯片组中。
多图对比：在电商或设计展示中，可以对比不同产品的图片。

示例代码

以下是一个简单的示例，展示如何在页面中创建两个独立的 Swiper 幻灯片组：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiple Swipers</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <style>
    .swiper-container {
      width: 100%;
      height: 300px;
    }
  </style>
</head>
<body>
  <!-- Swiper 1 -->
  <div class="swiper-container swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1-1</div>
      <div class="swiper-slide">Slide 1-2</div>
      <div class="swiper-slide">Slide 1-3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper 2 -->
  <div class="swiper-container swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 2-1</div>
      <div class="swiper-slide">Slide 2-2</div>
      <div class="swiper-slide">Slide 2-3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper1 = new Swiper('.swiper1', {
      slidesPerView: 1,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

    var swiper2 = new Swiper('.swiper2', {
      slidesPerView: 2,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
</body>
</html>