WordPress站点按钮点击联动Smart Slider滑动至对应项异常求助

问题描述 #

WordPress站点开发过程中需要实现按钮与Smart Slider的联动效果：点击对应按钮时，Smart Slider自动滑动到关联的指定滑块项，目前该联动功能无法正常触发。
相关问题参考截图：


问题站点：https://metatreasure.io/

修复步骤 #

• 开启滑块API权限
  进入Smart Slider后台，找到目标滑块的「高级」设置页，开启外部JavaScript调用权限，同时给滑块设置固定自定义ID（例如homeTopSlider），不要使用系统自动生成的随机ID，避免缓存或页面结构变动导致ID匹配失败。
• 给触发按钮加标识
  给所有需要触发滑块跳转的按钮添加统一类名slider-jump-btn，同时给每个按钮添加data-target-slide自定义属性，属性值填写对应要跳转的滑块索引，注意滑块索引从0开始计数：对应第一个滑块填0，第二个填1，以此类推。
• 写入官方标准调用代码
  将下面的代码放到主题自定义JS面板，或者对应页面的自定义HTML模块中，替换代码里的滑块ID为自己设置的固定ID即可：

  window.addEventListener('load', () => {
    const triggerBtns = document.querySelectorAll('.slider-jump-btn')
    if (!triggerBtns.length || !window.n2ss) return
    const targetSlider = n2ss.getSlider('homeTopSlider')
    if (!targetSlider) return
  
    triggerBtns.forEach(btn => {
      btn.addEventListener('click', e => {
        e.preventDefault()
        const slideIndex = Number(btn.dataset.targetSlide)
        if (!isNaN(slideIndex)) {
          targetSlider.slideTo(slideIndex)
        }
      })
    })
  })
  

• 校验生效
  保存代码后，清空站点缓存插件缓存、服务器缓存、浏览器缓存，硬刷新页面测试点击跳转即可。
• 异常排查
  如果点击无反应，打开浏览器控制台查看报错：如果提示找不到滑块实例，就把代码里的load事件加300ms延迟执行；如果存在JS库冲突，把原生JS写法换成对应jQuery兼容写法即可。不要使用模拟点击滑块内置分页圆点的方式实现跳转，这类方式会因为滑块DOM结构更新、类名变动直接失效。

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