如何让SwiperJS箭头按预期工作并自定义样式（体育滑块场景）

1. 调整Swiper核心配置（确保切换功能正常） #

先初始化满足「同时显示3项、点击箭头切换1项」需求的Swiper配置：

const swiper = new Swiper('.sports-swiper', {
  slidesPerView: 3, // 固定同时显示3个滑块
  spaceBetween: 20, // 滑块间间距，可根据视觉需求调整
  slidesPerGroup: 1, // 每次点击箭头切换1个滑块
  loop: false, // 不需要循环滚动则设为false，需要循环可改为true
  navigation: {
    nextEl: '.swiper-button-next-custom', // 自定义下箭头选择器
    prevEl: '.swiper-button-prev-custom', // 自定义上箭头选择器
  },
});

2. 自定义箭头HTML结构 #

替换默认箭头为自定义元素，推荐将箭头与滑块容器放在同一父级下，方便定位：

<div class="sports-swiper-wrap">
  <button class="swiper-button-prev-custom">←</button>
  <div class="swiper sports-swiper">
    <div class="swiper-wrapper">
      <!-- 你的体育项滑块内容 -->
      <div class="swiper-slide">篮球</div>
      <div class="swiper-slide">足球</div>
      <div class="swiper-slide">网球</div>
      <div class="swiper-slide">羽毛球</div>
      <div class="swiper-slide">乒乓球</div>
    </div>
  </div>
  <button class="swiper-button-next-custom">→</button>
</div>

3. 编写箭头样式（匹配预期视觉） #

根据你提供的预期样式，编写对应CSS（模拟圆形底色+箭头的样式，可自行调整颜色、尺寸）：

/* 父容器设置相对定位，作为箭头的定位基准 */
.sports-swiper-wrap {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

/* 自定义箭头通用样式 */
.swiper-button-prev-custom,
.swiper-button-next-custom {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  color: #333333;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

/* 左箭头定位 */
.swiper-button-prev-custom {
  left: -21px; /* 让箭头刚好贴在滑块左侧外 */
}

/* 右箭头定位 */
.swiper-button-next-custom {
  right: -21px; /* 让箭头刚好贴在滑块右侧外 */
}

/* 鼠标hover效果 */
.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
  background: #f8f8f8;
}

/* 箭头禁用状态（滑块到首尾时自动添加） */
.swiper-button-prev-custom.swiper-button-disabled,
.swiper-button-next-custom.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

关键注意点 #

• 确保已正确引入Swiper的基础CSS文件，避免默认样式冲突
• 若需要响应式适配，可在Swiper配置中添加breakpoints参数，不同屏幕尺寸调整slidesPerView数值
• 检查箭头元素的选择器与JS配置中的nextEl/prevEl完全一致，避免点击无响应

内容的提问来源于stack exchange，提问作者Mirel Matei