Slick slider 如何实现从其他页面链接跳转至指定幻灯片

核心实现逻辑：通过URL查询参数传递目标幻灯片的索引，第二页加载完成后读取参数，调用Slick内置的跳转方法即可，具体实现步骤如下：

1. 第一页配置跳转链接 #

在第一页的跳转链接后追加目标幻灯片索引的查询参数，参数名可自定义，示例中使用slideIndex：

<!-- 示例：跳转至第二页的第3个幻灯片，Slick索引从0开始，所以参数值为2 -->
<a href="/second-page.html?slideIndex=2">跳转到第二页的第3个幻灯片</a>

2. 第二页新增URL参数读取方法 #

在第二页的JS代码中新增通用的URL参数读取函数：

function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

3. Slick初始化后触发跳转 #

要确保Slick完全初始化完成后再执行跳转动作，推荐绑定Slick的init事件实现，避免提前调用失效：

// 先绑定init事件回调，再初始化Slick
$('.target-slider').on('init', function(event, slick) {
  // 读取URL中的目标幻灯片索引
  const targetIndex = getQueryParam('slideIndex');
  // 校验参数有效性后执行跳转
  if (targetIndex && !isNaN(Number(targetIndex))) {
    // slickGoTo第二个参数设为false保留切换动画，设为true直接定位无动画
    $('.target-slider').slick('slickGoTo', Number(targetIndex), false);
  }
});

// 初始化Slick（保留你原有的所有配置项即可）
$('.target-slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1
  // 其他原有配置
});

注意事项 #

• Slick的幻灯片索引默认从0开始计数，第一页跳转链接传递的参数值需要和索引对应，第1个幻灯片对应参数值0，第2个对应1，以此类推
• 如果页面存在多个Slick滑块，需要给目标滑块设置唯一的类名或ID，避免选择器匹配错误
• 如果Slick的幻灯片内容是异步加载渲染的，需要等数据渲染完成、Slick初始化结束后再执行slickGoTo方法

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