Swiper自定义分页器使用详解

Swiper自定义分页器是Swiper插件中的一个重要功能，它可以让我们以更加个性化和自由的方式展示分页器的样式和数量。下面是使用Swiper自定义分页器的完整攻略。

1. 引入Swiper插件

在使用Swiper自定义分页器之前，首先需要引入Swiper插件的代码。可以通过CDN引入或下载Swiper文件到本地，然后在页面中引入。

示例代码：

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <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>
    <!-- 自定义分页器 -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
</body>

在上面的代码中，我们引入了Swiper的CSS和JS文件，然后创建了一个Swiper容器，并在其中放置了3个swiper-slide，同时使用了Swiper自带的分页器。接下来，我们将进一步了解自定义分页器的使用。

2. 自定义分页器

2.1 分页器容器及样式

Swiper自定义分页器需要用一个容器来装载所有的分页器元素。我们可以通过HTML元素或者JavaScript代码创建分页器容器，并为其添加样式。

示例代码：

<!-- HTML元素方式创建分页器容器 -->
<div class="swiper-pagination"></div>

<!-- JavaScript方式创建分页器容器 -->
var myPagination = new Swiper('.swiper-pagination', {
  // 分页器的初始样式
  bulletClass: 'my-bullet',
  bulletActiveClass: 'my-bullet-active',
});

在上面的示例代码中，我们分别演示了两种创建分页器容器的方式，并分别添加了初始样式。其中，bulletClass用于设置未被选中的分页器的类名，bulletActiveClass用于设置当前页的类名。我们可以利用CSS样式来修改分页器的样式。

2.2 分页器元素及监听事件

在自定义分页器时，我们可以通过Swiper提供的API获取分页器的总数，并根据总数创建相应个数的分页器元素。同时，Swiper也提供了相关的监听事件，可以响应分页器的点击事件、切换事件等。

示例代码：

<!-- HTML方式添加分页器元素 -->
<div class="swiper-pagination">
  <span class="my-bullet"></span>
  <span class="my-bullet"></span>
  <span class="my-bullet"></span>
</div>

<!-- JavaScript方式添加分页器元素 -->
var myPagination = new Swiper('.swiper-pagination', {
  // 分页器容器的初始样式
  bulletClass: 'my-bullet',
  bulletActiveClass: 'my-bullet-active',

  // 监听分页器点击事件
  on: {
    click: function () {
      console.log('click pagination');
    },

    // 监听分页器切换事件
    slideChange: function () {
      console.log('change pagination');
    }
  }
});

在上面的代码中，我们分别演示了两种添加分页器元素的方式，并为它们添加了my-bullet类名。此外，我们还使用了Swiper提供的on事件监听，可以响应分页器的点击事件和切换事件，并在控制台输出一些信息。

3. 自定义Swiper分页器

综上所述，我们可以通过自定义CSS样式和监听事件对Swiper分页器进行个性化的修改。在自定义Swiper分页器时，可以使用HTML元素或JavaScript代码来创建分页器容器，并通过CSS样式添加相应的样式，最后使用Swiper提供的API和监听事件来完成自定义的效果。

下面是另一个示例，演示了如何使用图片作为Swiper分页器。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <style>
    .swiper-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
    }
    .swiper-pagination .swiper-pagination-bullet {
      margin: 0 10px;
    }
    .swiper-pagination .swiper-pagination-bullet:after {
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg');
      background-size: cover;
      border-radius: 50%;
    }
    .swiper-pagination .swiper-pagination-bullet-active:after {
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2015/12/10/16/39/canary-islands-1087391_960_720.jpg" /></div>
      <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2015/09/18/17/42/landscape-948536_960_720.jpg" /></div>
      <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2019/09/17/10/31/landscape-4489639_960_720.jpg" /></div>
      <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2017/02/26/13/47/festival-of-lights-2098415_960_720.jpg" /></div>
    </div>
    <!-- 自定义分页器 -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
</body>

在上面的代码中，我们使用CSS样式将分页器容器和分页器元素样式进行了修改，使它们成为了图片。我们把图片的地址设置为背景图片，并将圆圈的形状用border-radius改成了圆形。同时，我们还为选中的分页器添加了一个变大的效果。

以上就是Swiper自定义分页器的使用攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Swiper自定义分页器使用详解 - Python技术站

Swiper自定义分页器使用详解

1. 引入Swiper插件

2. 自定义分页器

2.1 分页器容器及样式

2.2 分页器元素及监听事件

3. 自定义Swiper分页器

相关文章