Vue项目中能否修改Swiper JS导航模块样式及修改方法？

当然可以实现，Swiper本身提供了高度的样式自定义能力，下面是几种实用的操作方式：

1. 直接覆盖默认类名样式 #

Swiper的导航组件（分页器、前进/后退按钮）都有固定的默认类名，你可以通过CSS直接覆盖这些类的样式。

示例代码： #

/* 自定义分页器圆点样式 */
.swiper-pagination-bullet {
  background-color: #ff6666;
  opacity: 1;
  width: 10px;
  height: 10px;
}
.swiper-pagination-bullet-active {
  background-color: #2196f3;
  width: 20px;
  border-radius: 10px;
}

/* 自定义前进/后退按钮 */
.swiper-button-prev, .swiper-button-next {
  color: #2196f3;
  /* 移除默认箭头图标 */
  background-image: none;
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 28px;
  font-weight: bold;
}

如果你的Vue组件用了scoped样式导致自定义CSS不生效，需要用深度选择器：

• Vue3：用::v-deep
• Vue2：用/deep/ 或 >>>

比如：

::v-deep .swiper-pagination-bullet {
  /* 样式代码 */
}

2. 自定义导航类名（更精准） #

如果担心默认类名冲突，或者需要更精细化的控制，可以在Swiper配置中指定自定义类名，再针对这些类写样式。

示例Vue组件（以Vue3 + Swiper 8+为例）： #

<template>
  <swiper
    :modules="[Navigation, Pagination]"
    :navigation="{
      prevEl: '.my-prev-btn',
      nextEl: '.my-next-btn'
    }"
    :pagination="{
      el: '.my-pagination',
      bulletClass: 'my-bullet',
      bulletActiveClass: 'my-bullet-active'
    }"
  >
    <swiper-slide>轮播项1</swiper-slide>
    <swiper-slide>轮播项2</swiper-slide>
    <swiper-slide>轮播项3</swiper-slide>

    <!-- 自定义导航按钮（也可以让Swiper自动生成，这里手动写更灵活） -->
    <div class="my-prev-btn">←</div>
    <div class="my-next-btn">→</div>
    <div class="my-pagination"></div>
  </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules';
// 导入基础样式和模块样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
</script>

<style scoped>
::v-deep .my-bullet {
  width: 12px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
::v-deep .my-bullet-active {
  background: #2196f3;
  transform: scale(1.3);
}

.my-prev-btn, .my-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.my-prev-btn {
  left: 15px;
}
.my-next-btn {
  right: 15px;
}
</style>

3. 注意事项 #

• 确保已经导入了Swiper的对应模块样式（比如导航、分页的CSS），否则默认的布局结构会缺失
• 如果使用Vue2，语法会有差异：比如通过import Swiper from 'swiper'导入，组件注册方式不同，深度选择器用/deep/
• 自定义图标时，除了用文字，还可以通过background-image设置自定义图片，或者结合图标库（如Element Plus图标、Iconfont）来实现更美观的按钮

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