SwiperJS 6.6.1 前后切换箭头不显示但点击区域可正常触发问题

根因说明 #

Swiper 6.x版本的默认导航箭头依赖内置的swiper-icons字体文件，线上环境字体加载失败、被安全策略拦截、加载顺序滞后，或者Swiper JS与CSS版本不匹配时，箭头的:after伪元素内容无法正常渲染，就会出现宽度为0、箭头不显示的问题。本地环境资源加载速度快、无CDN跳转问题因此不会复现。

修复方案 #

• 方案1：匹配Swiper资源版本
  确认页面中同时引入了版本号均为6.6.1的Swiper JS和CSS文件，引入路径明确指定版本号，避免无版本号的资源路径自动跳转至最新版，导致样式、字体文件不匹配。

• 方案2：自定义箭头样式（最稳妥，完全规避字体依赖）
  直接在全局CSS中覆盖默认导航按钮的伪元素样式，不需要依赖内置字体：

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: unset !important;
  font-size: 24px;
  color: #333;
}
.swiper-button-prev:after {
  content: '<' !important;
}
.swiper-button-next:after {
  content: '>' !important;
}

也可以根据需要替换为自定义的SVG图标、背景图样式。

• 方案3：修复轮播图片超出页面问题
  给轮播组件添加如下样式：

.swiper-container {
  overflow: hidden;
}
.swiper-slide img {
  max-width: 100%;
  height: auto;
  display: block;
}

• 额外排查点
  如果仅线上环境复现问题，可检查11ty构建配置是否存在CSS压缩、资源路径替换逻辑，是否误移除了Swiper的字体相关样式，或者线上资源是否被浏览器扩展、站点安全策略拦截。

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