Swiper.js教程：实现多张幻灯片分组滑动-html教程-PHP中文网

Swiper.js教程：实现多张幻灯片分组滑动

本教程详细指导如何在swiper.js中配置幻灯片分组滑动功能。通过利用`slidespergroup`参数，开发者可以轻松实现每次点击导航按钮时，同时移动多张幻灯片，而非逐一滑动。这对于展示多列内容（如产品列表或图片画廊）的轮播图尤其有用，能显著提升用户体验和内容展示效率。

引言：Swiper.js中的分组滑动需求

Swiper.js是一款功能强大且广泛使用的现代化触摸滑动组件库，适用于构建各种类型的轮播图、画廊和滑块。在许多场景下，我们可能需要在一个视图中同时展示多张幻灯片（例如，一个产品轮播每次显示三件商品）。默认情况下，Swiper的导航按钮（或通过滑动操作）每次只会移动一张幻灯片。然而，为了提供更直观、更高效的用户体验，尤其是在展示多列内容时，我们通常希望每次点击导航按钮时能够“翻页”式地移动一组幻灯片，而不是逐个移动。本文将深入探讨如何通过Swiper.js的配置参数实现这一需求。

核心配置：slidesPerGroup 参数详解

要实现每次点击导航按钮时移动多张幻灯片，Swiper.js提供了slidesPerGroup参数。

slidesPerGroup的作用： 此参数定义了每次滑动（无论是通过导航按钮点击、键盘导航还是触摸滑动）时，Swiper将移动的幻灯片数量。
与slidesPerView的关系： slidesPerGroup通常与slidesPerView参数结合使用。slidesPerView决定了在当前视图中同时显示的幻灯片数量，而slidesPerGroup则控制每次导航操作移动的幻灯片数量。为了实现“翻页”效果，通常会将slidesPerGroup的值设置为与slidesPerView相同。例如，如果slidesPerView: 3且slidesPerGroup: 3，那么每次点击“下一页”按钮，Swiper将移动三张幻灯片，显示下一组三张全新的幻灯片。如果slidesPerGroup: 1而slidesPerView: 3，则每次点击只会移动一张幻灯片，导致视图中的内容部分更新，这可能不是期望的行为。

实现步骤与示例代码

下面我们将通过一个具体的例子来演示如何在Swiper.js中配置slidesPerGroup。

1. 引入Swiper库

首先，在HTML文件中引入Swiper的CSS和JavaScript文件。你可以使用CDN链接，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

登录后复制

2. 构建HTML结构

Swiper需要一个特定的HTML结构：一个主容器（.swiper），一个包裹所有幻灯片的容器（.swiper-wrapper），以及每个单独的幻灯片（.swiper-slide）。此外，为了导航，我们还需要添加前进和后退按钮。

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <!-- 幻灯片内容，此处以图片为例 -->
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Placeholder Image">
      </header>
    </article>
  </div>

  <!-- 导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

登录后复制

3. 编写CSS样式

为幻灯片和容器添加一些基本的样式，以确保它们能够正确显示和布局。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

.product-block {
  background: #ffffff;
  border-radius: 4px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5; /* 保持图片比例 */
}

登录后复制

4. 初始化Swiper实例并配置slidesPerGroup

在JavaScript中初始化Swiper，并在配置对象中添加或修改slidesPerGroup参数。为了实现响应式设计，我们通常会在breakpoints中为不同的屏幕宽度设置不同的slidesPerView和slidesPerGroup。

const swiper = new Swiper('.swiper', {
  // 基本参数
  direction: 'horizontal', // 水平滑动
  loop: false,             // 不循环（可根据需求设置）

  // 导航箭头配置
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // 响应式断点配置
  breakpoints: {
    // 当屏幕宽度大于等于600px时
    600: {
      slidesPerView: 3,      // 同时显示3张幻灯片
      slidesPerGroup: 3,     // 每次滑动3张幻灯片
      spaceBetween: 15       // 幻灯片之间间距15px
    }
  }
});

登录后复制

在上述代码中，关键在于breakpoints配置下的slidesPerGroup: 3。它指示Swiper在屏幕宽度达到600px时，不仅显示3张幻灯片（slidesPerView: 3），而且每次点击导航按钮时，也会向前或向后移动3张幻灯片。

完整代码示例

将上述HTML、CSS和JavaScript代码整合在一起，即可得到一个功能完整的Swiper实例，实现每次点击滑动多张幻灯片的效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper.js 分组滑动教程</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f2f5;
        }
        .swiper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 0;
            position: relative;
        }
        .swiper-wrapper {
            display: flex;
        }
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .product-block {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            text-align: center;
        }
        .product-img img {
            max-width: 100%;
            height: auto;
            aspect-ratio: 4 / 3.5;
            object-fit: cover;
            display: block;
            border-radius: 8px 8px 0 0;
        }
        .swiper-button-prev,
        .swiper-button-next {
            color: #007aff;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: background-color 0.3s ease;
        }
        .swiper-button-prev:hover,
        .swiper-button-next:hover {
            background-color: rgba(255, 255, 255, 1);
        }
        .swiper-button-prev::after,
        .swiper-button-next::after {
            font-size: 20px;
        }
    </style>
</head>
<body>

    <div class="swiper">
        <div class="home-wrapper-categories swiper-wrapper">
            <article class="product-block swiper-slide">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 1">
                </header>
            </article>
            <article class="product-block swiper-slide">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 2">
                </header>
            </article>
            <article class="product-block swiper-slide drop-shadow">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 3">
                </header>
            </article>
            <article class="product-block swiper-slide drop-shadow">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 4">
                </header>
            </article>
            <article class="product-block swiper-slide drop-shadow">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 5">
                </header>
            </article>
            <article class="product-block swiper-slide drop-shadow">
                <header class="product-img">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="Product 6">
                </header>
            </article>
        </div>

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

    <script>
        const swiper = new Swiper('.swiper', {
            direction: 'horizontal',
            loop: false,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            breakpoints: {
                600: {
                    slidesPerView: 3,
                    slidesPerGroup: 3,
                    spaceBetween: 15
                }
            }
        });
    </script>

</body>
</html>

登录后复制

注意事项与最佳实践

slidesPerView与slidesPerGroup的匹配： 最佳实践是将slidesPerGroup设置为与slidesPerView相同的值，这样可以确保每次滑动都能呈现一个完整的新“页面”内容，提供最流畅和可预测的用户体验。
响应式设计： 充分利用breakpoints功能，为不同的设备屏幕尺寸配置不同的slidesPerView和slidesPerGroup。例如，在移动设备上可能只显示一张幻灯片并每次滑动一张，而在桌面端则显示三张并每次滑动三张。
循环模式（loop）的考量： 如果启用了loop: true，请确保slidesPerGroup的值能够整除总幻灯片数量。否则，在循环的边界处可能会出现不规则或不完整的滑动，影响用户体验。如果不能整除，可以考虑禁用loop或调整幻灯片数量。
性能： 尽管Swiper经过高度优化，但在处理大量幻灯片时，设置过大的slidesPerGroup可能会在某些低端设备上影响动画的流畅性。建议在实际项目中进行测试以确保性能达标。
拖动行为： slidesPerGroup不仅影响导航按钮，也影响用户通过拖动或手势滑动时的行为。当用户拖动时，Swiper会尝试对齐到slidesPerGroup定义的组边界。

总结

通过灵活运用slidesPerGroup参数，开发者可以轻松地定制Swiper.js的滑动行为，实现每次点击导航时移动多张幻灯片的功能。这对于构建产品展示、图片画廊或任何需要分组展示内容的轮播图来说至关重要，能够显著提升用户界面的交互性和内容的展示效率。掌握这一参数，将使你在使用Swiper.js时拥有更大的控制力和创造力。

以上就是Swiper.js教程：实现多张幻灯片分组滑动的详细内容，更多请关注php中文网其它相关文章！