Slick Slider - 从另一个页面创建链接

Posted 2023-05-07

【中文标题】Slick Slider - 从另一个页面创建链接

【英文标题】：Slick Slider - create a link from another page

【发布时间】：2021-12-25 03:14:34

【问题描述】：

是否可以在 slick 滑块中创建指向幻灯片的链接？示例：我的目标是创建带有页面 URL 的二维码并加载滑块，当前幻灯片为 5 号。

【问题讨论】：

尝试为每张幻灯片添加一个唯一的 ID，然后单击操作指向具有该 ID 的元素。我不确定它是否有效，但是将页面滚动到组件是相同的原理

不能使用唯一 ID。

【参考方案1】：

您可以通过几种方式做到这一点，但鉴于您想要创建 URL，您可以将幻灯片编号作为查询字符串传递，例如您有一个名为 www.example.com 的网站，您有一个超链接设置到您的页面，如下所示 @ 987654322@

在您拥有 slick-slider 的页面上，您将添加一个事件以首先侦听正在创建的 slick 滑块，然后检查是否有 URL 参数设置来执行 slickGoTo 事件，如下所示：-

$(".slick").on("init", function (e, slickInstance) 
  const params = new URLSearchParams(window.location.search);
  const myParam = params.get("slideNum");
  if (Number(myParam)) 
    slickInstance.slickGoTo(myParam);
  
);

$(".slick").slick(
  centerMode: true,
  slidesToShow: 1
);

此方法允许您在有或没有查询参数的情况下仍然转到 URL，并且还为您提供了相对轻松地更改幻灯片编号的灵活性。

【讨论】：

谢谢！有效。现在我有另一个问题（滚动到该部分），但我不是另一个问题 :)

滚动到部分的完整 URL（Wordpress 中的网站）是 example.com/pagename?slideNum=2#sectionID