Swiper滑块鼠标滚轮演示：将右侧分页栏移至左侧求助

首先，你写的CSS里有个明显笔误：ball: 50%应该改为top: 50%，这是垂直居中失效的直接原因。

另外，Swiper默认会给分页元素添加自带的样式类，这些默认样式会覆盖你自定义的规则，需要针对性调整：

方法1：修正并增强CSS样式 #

直接覆盖Swiper的默认定位样式，确保自定义规则优先级足够：

.swiper-pagination {
  position: absolute;
  left: 10px;
  top: 50%; /* 修正笔误 */
  transform: translateY(-50%);
  right: auto; /* 强制覆盖默认的右对齐设置 */
  width: auto; /* 避免分页栏占满容器宽度 */
}

/* 若为垂直滚动滑块，让分页圆点垂直排列 */
.swiper-pagination-bullet {
  display: block;
  margin: 8px 0 !important; /* 覆盖默认的水平间距 */
}

方法2：使用Swiper配置项（更推荐） #

通过Swiper初始化配置直接控制分页位置，无需额外写复杂CSS：

const swiper = new Swiper('.swiper', {
  // 保留原有鼠标滚轮等配置
  mousewheel: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    bulletPosition: 'left', // 指定分页圆点显示在左侧
    direction: 'vertical' // 适配垂直滚动滑块，让分页垂直排列
  }
});

两种方法都能解决分页栏右对齐问题，方法2更贴合Swiper官方用法，后续维护更方便。

内容的提问来源于stack exchange，提问作者Mehmet Yakamoz