如何为WordPress的swiper滑块通过CSS设置data-autoplay实现自动播放？

CSS完全无法实现目标滑块的自动播放效果。

• CSS的能力范围仅覆盖视觉样式、布局规则、静态视觉动画，没有任何语法可以驱动JS类组件的交互逻辑。你在页面上看到的data-autoplay="0"是Swiper初始化时读取的行为配置参数，属于JS运行层面的控制项，不存在通过CSS注入autoplay逻辑的实现路径。
• 从你提供的HTML结构能看到，元素自带swiper-container-initialized类，说明Swiper JS已经完成了滑块实例的初始化，这部分逻辑完全独立于CSS运行，所有尝试在自定义CSS里添加autoplay相关规则的操作都是无效的，会白白耗费调试时间。

你只需要在WordPress后台的自定义代码区域添加少量JS代码，就可以完成自动播放配置，完全不需要改动小部件的生成逻辑：

• 已初始化的Swiper实例会直接绑定在对应DOM元素的swiper属性上，不需要重写整套滑块的初始化逻辑，直接调取已有的实例开启自动播放即可。
• 可直接使用的代码片段：

const targetSlider = document.querySelector('.services-slider');
// 校验元素和绑定的Swiper实例存在后再执行操作，避免控制台报错
if (targetSlider?.swiper) {
  // 启动自动播放
  targetSlider.swiper.autoplay.start();
  // 自定义自动播放规则，参数与Swiper官方配置完全兼容
  Object.assign(targetSlider.swiper.params.autoplay, {
    delay: 3000, // 设置3秒自动切换一次
    disableOnInteraction: false, // 用户手动滑动滑块后不中断自动播放
    pauseOnMouseEnter: true // 鼠标悬停在滑块区域时自动暂停播放
  });
  // 让新的配置即时生效
  targetSlider.swiper.autoplay.update();
}

• 后续如果需要调整切换间隔、暂停规则，直接修改代码里对应的参数值即可，不需要触碰原小部件的源码。

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