Swiper.js教程：实现每次点击滑动多张幻灯片-html教程-PHP中文网

Swiper.js教程：实现每次点击滑动多张幻灯片

心靈之曲

发布： 2025-11-15 11:26:02

原创

275人浏览过

Swiper.js教程：实现每次点击滑动多张幻灯片

本教程详细指导如何在swiper.js中配置每次点击导航按钮时滑动多张幻灯片，而非单张。通过结合使用`slidesperview`和关键参数`slidespergroup`，你将学会如何创建更具效率和视觉流畅度的轮播效果，特别适用于产品展示或图片画廊等场景，提升用户体验。

引言：Swiper.js多张幻灯片滑动需求

Swiper.js作为一款功能强大且高度可定制的触摸滑动器，广泛应用于现代Web开发中，用于创建图片轮播、产品展示、内容滚动等交互式组件。在许多场景下，我们可能希望轮播组件一次性展示多张幻灯片（例如，同时显示3张产品图），并且在用户点击导航按钮时，不是一张一张地滑动，而是按组（例如，一次滑动3张）进行切换，以提供更高效和直观的浏览体验。

默认情况下，Swiper配置slidesPerView大于1时，虽然会同时显示多张幻灯片，但点击导航按钮时，通常只会滑动一张。要实现按组滑动，我们需要利用Swiper提供的一个特定参数。

核心配置：slidesPerGroup 参数详解

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

slidesPerView: 这个参数用于定义在Swiper容器中同时可见的幻灯片数量。例如，slidesPerView: 3表示同时显示3张幻灯片。
slidesPerGroup: 这是本教程的核心。它定义了每次点击导航按钮（或通过编程方式调用slideNext()/slidePrev()）时，Swiper应该滑动的幻灯片数量。当slidesPerView > 1时，slidesPerGroup参数的作用尤为明显。

工作原理： 当slidesPerGroup设置为一个大于1的值时，Swiper不再逐个滑动幻灯片，而是将幻灯片分组，并以组为单位进行滑动。例如，如果slidesPerView: 3且slidesPerGroup: 3，Swiper会同时显示3张幻灯片，并且每次点击“下一页”按钮时，会直接跳过3张幻灯片，显示下一组幻灯片。

实现步骤与示例代码

下面将通过一个具体的例子，演示如何配置Swiper以实现每次点击滑动多张幻灯片。

1. HTML结构准备

首先，确保你的页面中包含了Swiper的基本HTML结构，并引入了Swiper的CSS和JavaScript库。

造点AI

夸克 · 造点AI

325

查看详情

<!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>
  <!-- 引入 Swiper CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
  <style>
    /* 你的自定义CSS样式将放在这里 */
  </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="产品图片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="产品图片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="产品图片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="产品图片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="产品图片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="产品图片6">
        </header>
      </article>
    </div>

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

  </div>

  <!-- 引入 Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  <script>
    // 你的JavaScript初始化代码将放在这里
  </script>
</body>
</html>

登录后复制

2. CSS样式定义

为确保幻灯片和容器的正确显示，添加一些基本的CSS样式。

.swiper {
  width: 80%; /* 示例宽度 */
  margin: 20px auto;
  position: relative; /* 确保导航按钮定位正确 */
}

.product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex; /* 使内容居中或弹性布局 */
  justify-content: center;
  align-items: center;
  height: 200px; /* 示例高度 */
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5; /* 保持图片比例 */
  object-fit: cover; /* 填充容器 */
  border-radius: 4px;
}

/* Swiper 导航按钮基础样式 */
.swiper-button-prev,
.swiper-button-next {
  color: #007aff; /* 按钮颜色 */
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  top: 50%;
  transform: translateY(-50%);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px;
}

登录后复制

3. JavaScript初始化与关键配置

这是实现分组滑动的核心部分。我们需要在Swiper的初始化配置中添加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 // 幻灯片之间的间距
    },
    // 可以添加更多断点，例如：
    // 1024: {
    //   slidesPerView: 4,
    //   slidesPerGroup: 4,
    //   spaceBetween: 20
    // },
    // 0: { // 默认配置，当屏幕宽度小于600px时
    //   slidesPerView: 1,
    //   slidesPerGroup: 1,
    //   spaceBetween: 10
    // }
  }
});

登录后复制

在上述JavaScript代码中，关键在于breakpoints对象内部的配置：

slidesPerView: 3: 定义了在屏幕宽度大于等于600px时，Swiper容器内同时显示3张幻灯片。
slidesPerGroup: 3: 这是实现每次点击滑动3张幻灯片的核心参数。 它确保了当用户点击“下一页”或“上一页”按钮时，Swiper会以3张幻灯片为一组进行整体滑动。
spaceBetween: 15: 设置幻灯片之间的间距为15像素。

注意事项与最佳实践

slidesPerGroup与slidesPerView的关系： 为了获得最佳的用户体验和视觉效果，建议slidesPerGroup的值与slidesPerView的值保持一致。例如，如果显示3张，就滑动3张。如果slidesPerGroup的值小于slidesPerView（例如slidesPerView: 3, slidesPerGroup: 1），则会显示3张，但每次只滑动1张，这可能不是你想要的分组滑动效果。如果slidesPerGroup的值大于slidesPerView，或者不是slidesPerView的整数倍，可能会导致滑动时出现不完整的组，或者滑动行为不直观。
响应式设计： 利用breakpoints参数是实现良好用户体验的关键。你可以为不同的屏幕尺寸定义不同的slidesPerView和slidesPerGroup值，确保在桌面、平板和移动设备上都能呈现最佳的幻灯片分组滑动效果。例如，在小屏幕上可能只显示1张并滑动1张，而在大屏幕上显示3张并滑动3张。
循环模式（loop: true）下的考虑： 当启用loop: true时，Swiper会复制幻灯片以创建无缝循环效果。在这种情况下，slidesPerGroup的行为可能会稍微复杂一些。通常，它仍然会按组滑动，但建议在启用循环时进行充分测试，以确保滑动逻辑符合预期。
幻灯片总数与分组： 如果幻灯片的总数不是slidesPerGroup的倍数，那么最后一组幻灯片可能不会填满整个视图，或者在滑动到末尾时行为会略有不同。这是正常现象，但需要考虑是否符合设计要求。

总结

通过在Swiper初始化配置中合理使用slidesPerGroup参数，你可以轻松实现每次点击导航按钮时滑动多张幻灯片的功能。结合slidesPerView和breakpoints进行响应式配置，能够极大地提升用户在不同设备上的浏览体验。务必根据你的具体项目需求和设计目标，灵活调整这些参数，以创建出最符合预期的轮播效果。

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