能否在Swiper轮播组件中渲染四个不同SVG图标作为分页指示器？

完全可以实现这个需求，核心是利用Swiper提供的renderBullet自定义渲染钩子，将对应索引的SVG图标插入到分页按钮中。以下是具体实现步骤和代码：

1. 准备SVG图标集合 #

先定义一个包含4个不同SVG字符串的数组，每个元素对应一个分页按钮的图标：

const svgIcons = [
  // 第一个SVG图标
  '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#999"/></svg>',
  // 第二个SVG图标
  '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 10h-2v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z" fill="#999"/></svg>',
  // 第三个SVG图标
  '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14h-2v-6h2v6zm4 0h-2v-2h2v2zm4 0h-2v-6h2v6z" fill="#999"/></svg>',
  // 第四个SVG图标
  '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 10h-2V8h2v4zm4 0h-2V6h2v6zm4 0h-2v-4h2v4z" fill="#999"/></svg>'
];

2. 修改Swiper初始化代码 #

调整renderBullet方法，将对应索引的SVG插入到分页按钮中。由于开启了loop: true，Swiper会生成额外的幻灯片副本，所以需要用index % svgIcons.length来确保索引不会越界：

var swiper = new Swiper(".swiper", {
  slidesPerView: "auto",
  centeredSlides: true,
  watchSlidesVisibility: true,
  parallax: false,
  loop: true,
  height: "auto",
  effect: "slide",
  disableDraggable: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      // 处理loop模式下的索引重复问题
      const iconIndex = index % svgIcons.length;
      return '<div class="' + className + '">' + svgIcons[iconIndex] + "</div>";
    }
  }
});

注：原代码中重复定义的paginationClickable: true和loop: true已去重。

3. 调整CSS样式（可选） #

为了让SVG图标正确显示，需要调整分页按钮的样式，比如设置宽高、去掉默认背景等：

.swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  background: transparent;
  opacity: 1;
}
.swiper-pagination-bullet-active svg path {
  fill: #000; /* 激活状态下的图标颜色 */
}

完整HTML代码 #

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/Ресурс 1@2x 1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/Ресурс 1@2x 1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/Ресурс 1@2x 1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/Ресурс 1@2x 1.jpg" alt=""></div>
    </div>
</div>
<div class="swiper-pagination"></div>

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