如何修改Swiper导航（分页器与箭头）的默认颜色

要覆盖Swiper默认的蓝色样式，直接针对导航按钮和分页器的专属类写CSS即可，以下是具体修改方案：

1. 修改导航箭头颜色 #

Swiper左右导航箭头对应的类是.swiper-button-next和.swiper-button-prev，设置color属性为绿色即可，若默认样式优先级较高，可加!important强制覆盖：

.swiper-button-next, .swiper-button-prev {
  color: #2ecc71 !important; /* 可替换为任意绿色值，比如green、#00ff00 */
}

2. 修改分页器样式 #

分页器未激活圆点的类是.swiper-pagination-bullet，激活状态的类是.swiper-pagination-bullet-active，分别设置背景色：

/* 未激活的分页圆点 */
.swiper-pagination-bullet {
  background-color: #95e1d3 !important; /* 浅绿底色，可自定义 */
}

/* 激活状态的分页圆点 */
.swiper-pagination-bullet-active {
  background-color: #2ecc71 !important; /* 和导航箭头保持一致的主绿色 */
}

完整修改后的代码 #

CSS部分 #

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 导航箭头改绿色 */
.swiper-button-next, .swiper-button-prev {
  color: #2ecc71 !important;
}

/* 分页器样式修改 */
.swiper-pagination-bullet {
  background-color: #95e1d3 !important;
}

.swiper-pagination-bullet-active {
  background-color: #2ecc71 !important;
}

HTML部分 #

<swiper-container class="mySwiper" pagination="true" pagination-clickable="true" navigation="true" space-between="30" loop="true">
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 4</swiper-slide>
  <swiper-slide>Slide 5</swiper-slide>
  <swiper-slide>Slide 6</swiper-slide>
  <swiper-slide>Slide 7</swiper-slide>
  <swiper-slide>Slide 8</swiper-slide>
  <swiper-slide>Slide 9</swiper-slide>
</swiper-container>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>

你可以根据需求调整绿色的具体色值，确保自定义CSS加载顺序在Swiper默认样式之后，或者用!important强制覆盖即可生效。

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