在 jQuery Slick 幻灯片中使用变量来设置初始幻灯片不起作用

Question

我正在使用jQuery Slick 在我的网站上使用幻灯片。

我的幻灯片在页面加载时被隐藏，我可以点击一些缩略图来打开我的幻灯片。
每个缩略图都有一个数据编号属性（我的变量），当单击缩略图时，我的幻灯片会自行打开，并且应根据单击的缩略图设置初始幻灯片。

这是我没有变量的代码。我选择拇指 4 作为示例，它工作正常：

$(".thumb").click(function(){
  $(".slider").show();
  setTimeout(function(){
    $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: true,   
      initialSlide : 4,
      infinite: true,
      prevArrow : $('.prev'),
      nextArrow : $('.next')});
    $(".slider").css("opacity", 1);
  }, 2000);
});

您可以在 this jsFiddle 上看到它。

现在，当我尝试在我的代码中为 initialSlide 放置一个变量时，初始幻灯片没问题，但是当我单击“下一步”时，我的幻灯片消失或无法正常工作...
试试拇指 7...

这是我的代码：

$(".thumb").click(function(){
  var initialslide = $(this).attr("data-number");
  $(".slider").show();
  setTimeout(function(){
    $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: true,   
      initialSlide : initialslide,
      infinite: true,
      prevArrow : $('.prev'),
      nextArrow : $('.next')});
    $(".slider").css("opacity", 1);
  }, 200);
});

查看此jsFiddle 以查看它的实际效果：如果您在幻灯片出现后单击下一步，您将看到问题。

我不知道我做错了什么，有人可以帮助我吗？

谢谢

Answer 1

tl;dr 将parseInt 与$(this).attr("data-number") 或$(this).data("number") 一起使用

我刚刚添加了parseInt(initialSlide)，它似乎已经解决了您的问题。

$(".thumb").click(function(){
  var initialslide = $(this).attr("data-number");

  $(".slider").show();
  setTimeout(function(){
    $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: true,   
      initialSlide : parseInt(initialslide),
      infinite: true,
      prevArrow : $('.prev'),
      nextArrow : $('.next')});
    $(".slider").css("opacity", 1);
  }, 200);
});

编辑：您可以直接使用jQuery Data method，而不是$(this).attr(...)，后者似乎会自动转换为int。

$(".thumb").click(function(){
  var initialslide = $(this).data("number");

  $(".slider").show();

  setTimeout(function(){
    $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: true,   
      initialSlide : initialslide,
      infinite: true,
      prevArrow : $('.prev'),
      nextArrow : $('.next')});
    $(".slider").css("opacity", 1);
  }, 200);
});