【问题标题】:Slick Slider - create a link from another pageSlick Slider - 从另一个页面创建链接
【发布时间】:2023-03-22 09:50:01
【问题描述】:

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

【问题讨论】:

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

标签: javascript slick.js


【解决方案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
猜你喜欢
  • 2020-10-27
  • 1970-01-01
  • 1970-01-01
  • 2010-11-18
  • 2019-09-10
  • 1970-01-01
  • 1970-01-01
  • 2015-06-05
  • 1970-01-01
相关资源
最近更新 更多