Swiper JS滑块滚动条自定义实现方法咨询

Swiper的滚动条有专属的CSS类，通过覆盖这些类的样式就能实现目标效果，直接在现有CSS中添加以下代码：

/* 滚动条轨道样式 */
.swiper-scrollbar {
  background-color: #e0e0e0; /* 轨道底色，可自行调整 */
  height: 4px; /* 轨道高度 */
  border-radius: 2px; /* 轨道圆角 */
}

/* 核心：修改拖动按钮为红色圆形 */
.swiper-scrollbar-drag {
  background-color: #ff0000; /* 红色背景 */
  border-radius: 50%; /* 圆形按钮 */
  width: 16px; /* 按钮宽度 */
  height: 16px; /* 按钮高度 */
  margin-top: -6px; /* 偏移让按钮垂直居中于轨道 */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 可选：添加阴影增强质感 */
}

/* 可选：鼠标悬停时的按钮放大效果 */
.swiper-scrollbar-drag:hover {
  transform: scale(1.1);
}

添加后，滚动条的拖动按钮就会变成红色圆形，和你想要的YouTube进度条样式一致。另外你的JS配置中已经开启了draggable: true，确保了滚动条可拖动的功能正常。

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