Swiper.js淡入淡出效果致链接不可点击及初始化动画问题求解

在WordPress+Oxygen Builder环境中，用Swiper.js配合Oxygen Repeater实现动态轮播，设置fade效果后出现两个问题：

• 页面加载时幻灯片出现从右向左堆叠的初始化动画，需要移除
• 轮播内的链接无法点击，仿佛存在覆盖层，关闭fade效果后该问题消失

现有Swiper配置 #

var swiper1 = new Swiper('#swiper1 .swiper-container', {
    fadeEffect: { crossFade: true },
    pagination: {
        el: dot1,
        clickable: true,
    },
    effect: 'fade', 
    loop: true,
    speed: 400,
    touchAction: 'none',
    preventClicks: false,
    preventClicksPropagation: false,
})

解决方案 #

1. 移除初始化时的堆叠动画 #

Swiper fade效果的初始化动画多来自默认过渡样式，可通过两种方式解决：

• 在配置中新增initialSlideTransition: false，直接禁用初始幻灯片的过渡动画：

  var swiper1 = new Swiper('#swiper1 .swiper-container', {
      fadeEffect: { crossFade: true },
      pagination: {
          el: dot1,
          clickable: true,
      },
      effect: 'fade', 
      loop: true,
      speed: 400,
      touchAction: 'none',
      preventClicks: false,
      preventClicksPropagation: false,
      initialSlideTransition: false, // 禁用初始过渡动画
  })
  

• 若上述配置无效，添加自定义CSS覆盖默认过渡：

  #swiper1 .swiper-slide {
      transition: none !important;
  }
  #swiper1 .swiper-slide-active {
      transition: opacity 400ms ease !important; /* 保留切换时的fade效果 */
  }
  

2. 修复fade效果下的链接无法点击问题 #

该问题多因Swiper fade效果的层级或事件阻止规则导致，可尝试以下操作：

• 通过CSS调整幻灯片的交互权限与层级，确保激活的幻灯片可被点击：

  #swiper1 .swiper-slide {
      pointer-events: none;
      z-index: 1;
  }
  #swiper1 .swiper-slide-active {
      pointer-events: auto;
      z-index: 2;
  }
  

• 修改Swiper配置中的触摸行为，避免完全阻止交互：

  var swiper1 = new Swiper('#swiper1 .swiper-container', {
      fadeEffect: { crossFade: true },
      pagination: {
          el: dot1,
          clickable: true,
      },
      effect: 'fade', 
      loop: true,
      speed: 400,
      touchAction: 'pan-y', // 允许垂直触摸，避免完全锁死交互
      preventClicks: false,
      preventClicksPropagation: false,
      initialSlideTransition: false,
  })
  

• 用浏览器开发者工具检查轮播区域是否存在Oxygen Builder默认添加的覆盖层，若有则给该元素设置pointer-events: none，释放点击权限。

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