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

Question

是否可以在光滑的滑块中创建指向幻灯片的链接？示例：我的目标是使用页面的 URL 创建 QR 码并加载滑块，当前幻灯片是第 5 号。

标签： javascriptslick.js

Answer 1

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

在您拥有 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，并且还为您提供了相对轻松地更改幻灯片编号的灵活性。