如何实现单张展示的产品轮播配置3个可点击分页圆点？

修正核心配置错误 #

你当前的代码存在3个关键问题导致效果不符合预期：

• 无效属性slidePreview：Swiper没有这个配置项，直接删除
• 错误配置slidesPerColumn: 3：该属性会让幻灯片垂直排列为3列，完全违背单张横向轮播的需求，必须移除
• 多余的renderBullet：如果示例图是纯圆点而非带数字的指示器，这个自定义渲染会导致圆点显示数字，不符合要求，建议删除

修正后的配置代码：

const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  slidesPerView: 1,
  // 可选：如需自动轮播可添加以下配置，不需要则删除
  // autoplay: { delay: 3000 },
});

确保HTML结构合规 #

Swiper对DOM结构有严格要求，必须按以下层级编写：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 对应3张产品图，每个slide包裹一张图片 -->
    <div class="swiper-slide"><img src="产品图1路径" alt="产品1"></div>
    <div class="swiper-slide"><img src="产品图2路径" alt="产品2"></div>
    <div class="swiper-slide"><img src="产品图3路径" alt="产品3"></div>
  </div>
  <!-- 分页圆点容器 -->
  <div class="swiper-pagination"></div>
</div>

引入必要的Swiper资源 #

必须引入Swiper的CSS和JS文件，否则分页圆点的基础样式会缺失：

<!-- 以Swiper 8版本为例，本地引入则替换为本地文件路径 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

自定义圆点样式匹配示例图 #

如果示例图的圆点有特殊样式（如大小、颜色、选中状态），可通过CSS覆盖默认样式：

/* 普通圆点样式 */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #ddd;
  opacity: 1;
}
/* 选中状态圆点样式 */
.swiper-pagination-bullet-active {
  background-color: #你的品牌主色;
}

内容的提问来源于stack exchange，提问作者Егор