I'm using a slideshow on my website using jQuery Slick.

My slideshow is hidden when page is loaded, and I have some thumbnails to click on to open my slideshow.
Each thumbnail has a data-number attribute (my variable), and when clicking on a thumbnail, my slideshow opens itself, and the initial slide should be set depending on which thumbnails has been clicked.

Here is my code without the variable. I choose thumb 4 just for the example, and it works fine :

$(".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);
});

You can see it working on this jsFiddle.

Now, when I try to put a variable in my code for the initialSlide, the initial slide is ok, but when I click on "next", my slideshow disappear or is not working properly...
try for example thumb 7...

Here is my code :

$(".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);
});

See this jsFiddle to see it in action : if you click on next after the slideshow appears, you'll see the problem.

I don't know what I'm doing wrong, can anybody help me with this ?

Thanks

I'm using a slideshow on my website using jQuery Slick.

My slideshow is hidden when page is loaded, and I have some thumbnails to click on to open my slideshow.
Each thumbnail has a data-number attribute (my variable), and when clicking on a thumbnail, my slideshow opens itself, and the initial slide should be set depending on which thumbnails has been clicked.

Here is my code without the variable. I choose thumb 4 just for the example, and it works fine :

$(".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);
});

You can see it working on this jsFiddle.

Now, when I try to put a variable in my code for the initialSlide, the initial slide is ok, but when I click on "next", my slideshow disappear or is not working properly...
try for example thumb 7...

Here is my code :

$(".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);
});

See this jsFiddle to see it in action : if you click on next after the slideshow appears, you'll see the problem.

I don't know what I'm doing wrong, can anybody help me with this ?

Thanks

• javascript
• jquery
• html
• jquery-plugins
• slick.js

1 Answer 1

tl;dr use parseInt with $(this).attr("data-number") or $(this).data("number")

I just added parseInt(initialSlide) and it seems to have fixed your issue.

$(".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);
});

Edit: you can use jQuery Data method directly, instead of $(this).attr(...), which seems to cast to int automagically.

$(".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);
});