添加按钮后移动端Swiper图片滑块出现异常问题求助

问题根源 #

你碰到的核心问题是：.gallery-cards的content:''伪元素把按钮挡住了导致点不了；但一删这个属性，滑块布局直接崩了，移动端还卡得不行。这个伪元素大概率是用来撑布局、维持滑块尺寸或者清浮动的，直接删掉等于破坏了Swiper计算滑块位置和尺寸的基础，自然会出问题。

最优解决方案：留伪元素，调层级让按钮可点 #

不用删content:''，只要给按钮加个更高的层级，让它盖在伪元素上面就行，这样既保住了原布局不卡顿，按钮也能正常点击。

具体改法 #

1. 原.gallery-cards的伪元素代码不动，保留content:''
2. 给你的按钮加下面这段CSS：

.gallery-card-button {
  position: relative; /* 必须设定位，z-index才生效 */
  z-index: 10; /* 数值只要比伪元素的z-index大就行，比如伪元素是1，这里设2也够 */
  /* 你的按钮原有样式不变 */
}

3. 如果伪元素本身设了z-index，确保按钮的z-index比它大就行。

为啥这个方法管用？ #

Swiper在移动端是靠硬件加速渲染滑块的，布局结构乱了直接触发重绘重排，就会卡顿。保留伪元素维持原布局，再通过层级调整让按钮不被遮挡，完美解决两个问题。

备选方案（如果上面的方法没效果） #

要是伪元素本身不需要拦截点击事件，直接给伪元素加pointer-events: none，让它不挡点击：

.gallery-cards::before { /* 看你用的是before还是after伪元素 */
  content: '';
  pointer-events: none; /* 加这个属性，伪元素就不会拦截点击了 */
  /* 其他伪元素样式不变 */
}

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