Swiper.js进度条与分页数字教程

想要在 Swiper.js 轮播图中同时展示进度条和分页数字，提升用户体验吗？本文将为你提供一份详尽的教程。Swiper.js 提供了强大的自定义分页功能，通过 `pagination.type: 'custom'` 和 `pagination.renderCustom` 选项，开发者可以灵活控制分页的显示内容。本文将深入讲解如何自定义分页渲染函数，将进度条和分页数字巧妙地整合在一起，并提供完整的代码示例和详细步骤，助你轻松实现这一功能，让你的 Swiper.js 轮播图更具吸引力，更易于用户理解当前轮播进度。快来学习吧！

本文旨在帮助开发者在使用 Swiper.js 轮播图组件时，同时展示进度条和分页数字。通过自定义分页渲染函数，我们可以将进度条和分页数字整合到一起，提供更丰富的用户体验。本文将提供详细的代码示例和步骤，助你轻松实现这一功能。

在使用 Swiper.js 创建轮播图时，我们经常需要展示分页信息，以便用户了解当前轮播进度。Swiper.js 提供了多种分页类型，如数字分页和进度条分页。然而，有时我们需要同时展示这两种信息，以提供更全面的用户体验。本文将介绍如何通过自定义分页渲染函数，在 Swiper.js 轮播图中同时显示进度条和分页数字。

实现原理

Swiper.js 允许我们自定义分页的渲染方式，通过 pagination.type: 'custom' 和 pagination.renderCustom 选项，我们可以完全控制分页的显示内容。我们的目标是在 renderCustom 函数中，同时生成进度条和分页数字的 HTML 代码，并将它们组合在一起。

代码示例

以下是一个完整的代码示例，展示了如何在 Swiper.js 中同时显示进度条和分页数字：

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<style>
  .swiper {
    width: 600px;
    height: 300px;
  }

  .progressbar {
    width: 100%;
    height: 5px;
    background-color: #eee;
    margin-bottom: 5px;
  }

  .progressbar-fill {
    height: 100%;
    background-color: #007bff;
    width: 0%; /* Initial width */
  }

  .swiper-pagination {
    text-align: center;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #ddd;
    margin: 0 5px;
    cursor: pointer;
  }

  .swiper-pagination-bullet-active {
    background: #007bff;
  }
</style>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.mySwiper', {
    keyboard: {
      enabled: true,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'custom',
      renderCustom: function (swiper, current, total) {
        // Render the progress bar
        var progressBarHtml = '<div class="progressbar"><div class="progressbar-fill" style="width:' + (current / total) * 100 + '%"></div></div>';

        // Render the pagination numbers
        var paginationHtml = '';
        for (var i = 0; i < total; i++) {
          var className = 'swiper-pagination-bullet';
          if (i === current - 1) {
            className += ' swiper-pagination-bullet-active';
          }
          paginationHtml += '<span class="' + className + '">' + (i + 1) + '</span>';
        }

        // Combine the progress bar and pagination numbers
        return progressBarHtml + paginationHtml;
      }
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    mousewheel: {
      releaseOnEdges: true,
    },
  });
</script>

代码解释

1. HTML 结构： 我们创建了一个包含轮播内容的 swiper-wrapper，以及用于显示分页信息的 swiper-pagination 元素。
2. CSS 样式： 我们定义了进度条和分页数字的样式。 .progressbar 用于创建进度条的容器，.progressbar-fill 用于填充进度条的颜色。.swiper-pagination-bullet 定义了分页数字的样式，.swiper-pagination-bullet-active 定义了当前激活分页数字的样式。
3. JavaScript 代码：
   • 我们使用 new Swiper() 初始化 Swiper 实例。
   • 在 pagination 配置中，我们将 type 设置为 'custom'，并定义了 renderCustom 函数。
   • renderCustom 函数接收三个参数：swiper (Swiper 实例), current (当前 slide 的索引), total (总 slide 数量)。
   • 在 renderCustom 函数中，我们首先生成进度条的 HTML 代码。 progressBarHtml 包含一个 progressbar 容器和一个 progressbar-fill 元素。 progressbar-fill 的 width 属性根据当前 slide 的索引计算得出，表示进度百分比。
   • 然后，我们生成分页数字的 HTML 代码。 我们循环遍历所有 slide，为每个 slide 创建一个 span 元素，并根据当前 slide 的索引添加 swiper-pagination-bullet-active 类。
   • 最后，我们将进度条和分页数字的 HTML 代码连接在一起，并返回。

注意事项

• CSS 样式： 你可以根据自己的设计需求，自定义进度条和分页数字的 CSS 样式。
• HTML 结构： 确保 HTML 结构与代码示例一致，特别是 swiper-pagination 元素的存在。
• Swiper.js 版本： 此代码示例适用于 Swiper.js 5 及以上版本。

总结

通过自定义分页渲染函数，我们可以灵活地控制 Swiper.js 轮播图的分页显示方式。本文提供了一个同时显示进度条和分页数字的示例，你可以根据自己的需求进行修改和扩展，以实现更丰富的分页效果。掌握了这种方法，你就可以为用户提供更直观、更友好的轮播体验。

今天关于《Swiper.js进度条与分页数字教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！