Swiper实现按页导航而非按项导航的方法

要实现导航按钮切换整页、分页点数量等于页数的效果，通过Swiper核心参数配置+自定义分页渲染即可完成，具体步骤如下：

1. 核心参数配置（实现整页切换） #

设置slidesPerView为每页显示的slide数量，同时将slidesPerGroup设为相同值，这样next/prev按钮点击时会直接切换整组（整页）的slide，而非单个slide。

2. 自定义分页渲染（让分页点数量等于页数） #

默认分页点按总slide数生成，需通过pagination.renderBullet自定义渲染逻辑，只生成对应页数的点；同时通过onClick绑定分页点跳转事件，确保点击分页点能跳转到对应页。

完整代码示例 #

HTML结构

<div class="swiper">
  <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 class="swiper-slide">Slide 6</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

JS配置

const swiper = new Swiper('.swiper', {
  slidesPerView: 3, // 每页显示3个slide
  spaceBetween: 20, // slide之间的间距
  slidesPerGroup: 3, // 每次切换整组（和slidesPerView值一致）
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    // 自定义渲染分页点，仅生成对应页数的点
    renderBullet: function (index, className) {
      const totalSlides = this.slides.length;
      const slidesPerView = this.params.slidesPerView;
      const totalPages = Math.ceil(totalSlides / slidesPerView);
      
      // 只渲染对应页数的点
      if (index < totalPages) {
        return `<span class="${className}" data-index="${index}"></span>`;
      }
      return '';
    },
    // 绑定分页点点击事件，跳转到对应页的起始位置
    onClick: function (swiperInstance, event) {
      const target = event.target;
      if (target.classList.contains('swiper-pagination-bullet')) {
        const pageIndex = parseInt(target.getAttribute('data-index'));
        swiperInstance.slideTo(pageIndex * swiperInstance.params.slidesPerView);
      }
    }
  }
});

3. 循环模式下的适配（可选） #

如果开启了loop模式，由于Swiper会自动复制前后组slide，计算总页数时需要排除复制的slide：

// 在renderBullet中调整总slide数计算
const originalSlideCount = this.slides.length - 2 * this.params.slidesPerView;
const totalPages = Math.ceil(originalSlideCount / this.params.slidesPerView);

内容的提问来源于stack exchange，提问作者baduga