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添加一个变量时，初始幻灯片是可以的，但是当我点击＆＃34; next＆＃34;时，我的幻灯片显示消失或无法正常工作......
尝试例如拇指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以查看其实际效果：如果您在幻灯片显示后单击 next ，则会看到问题。

我不知道自己做错了什么，有人可以帮我解决这个问题吗？

由于

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); });，似乎解决了您的问题。

$(this).attr(...)

修改：您可以直接使用jQuery Data method，而不是$(".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); });，它似乎会自动转换为int。

JOptionPane.showConfirmDialog(null,"choose one", "choose one", JOptionPane.YES_NO_OPTION);
if (result== JOptionPane.NO_OPTION) {
        System.exit(0);

    }

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

1 个答案: