I have used a Slick Slider on my page. Now, everything works fine, but I have to make the particular div triggered on a specific button press. It is like if I have div-2, and I have a button named as button-2 somewhere in the section, on click of it, the slick slider should change it to the div 2, making it active with the right active slick dots.

I have researched about it and got to know that sliderGoTo will do my job. But I don't know why it is not working fine. I have tried my level best, but somehow the button doesn't trigger the right div at all.

What I have tried so far (in pseudo form):

$(document).ready(function() {
  $('.box').slick({
    dots: true,
    arrows: false
  });

  $('#trigger-button').click(function() {
      slideIndex = $(this).index();
      $('.slideshow').slickGoTo(parseInt(slideIndex));
    )
  }
});

/*$('#trigger-button').click(function() {
  var slider = $('.box');
  slider[1].slickGoTo(parseInt(actIndex));
})*/ 

//Alternatively used

<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
  <div class='div-1'>
    Some content
  </div>
  <div class='div-2'>
    Some content
  </div>
</div>

I have used a Slick Slider on my page. Now, everything works fine, but I have to make the particular div triggered on a specific button press. It is like if I have div-2, and I have a button named as button-2 somewhere in the section, on click of it, the slick slider should change it to the div 2, making it active with the right active slick dots.

I have researched about it and got to know that sliderGoTo will do my job. But I don't know why it is not working fine. I have tried my level best, but somehow the button doesn't trigger the right div at all.

What I have tried so far (in pseudo form):

$(document).ready(function() {
  $('.box').slick({
    dots: true,
    arrows: false
  });

  $('#trigger-button').click(function() {
      slideIndex = $(this).index();
      $('.slideshow').slickGoTo(parseInt(slideIndex));
    )
  }
});

/*$('#trigger-button').click(function() {
  var slider = $('.box');
  slider[1].slickGoTo(parseInt(actIndex));
})*/ 

//Alternatively used

<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
  <div class='div-1'>
    Some content
  </div>
  <div class='div-2'>
    Some content
  </div>
</div>

I have tried this also, since I want the specific div to be triggered that is div-2, to be triggered when we press the button with the id trigger-button. Can be found as the ment.

But no results. I don't have much experience with usage of SLICK SLIDER, but I have tried. I would be glad to learn more about it. Thanks

EDITS

Thank You guys for helping me out. I have found one solution for me, and that too in an easier way. If you want to go to a specific pos, you have to use this syntax and your work is done :

$('.box').slick('slickGoTo', divNo). Remember divNo = currentPos - 1.

Nowadays, the slickGoTo doesn't work like the previous syntax which is .slickGoTo(parseInt(slideIndex));. It will give you an error which is Undefined slickGoTo method. Proper usage is depicted in my code. Thanks again, and I'm sure this will help people in future references.

• javascript
• html
• slick.js

2 Answers 2

Try using $('.box').slick('slickGoTo', parseInt(slideIndex), false); instead.

On a side note: I'm not sure using .index() will always work as intended.

Check https://github./kenwheeler/slick for more details.

You have some error in your code.How you can get the index of element is depends upon your elements on HTML

But currently you have to div so you can set index as 1 and increment/reset onclick of button.

Replace

$('#trigger-button').click(function() {
      slideIndex = $(this).index();
      $('.slideshow').slickGoTo(parseInt(slideIndex));
    )
  }

To

var indexVal=1;  $("#trigger-button").click(function(e){
        e.preventDefault();
       // slideIndex = $(this).index();
        $( '.box' ).slickGoTo(indexVal);
        indexVal=indexVal+1;
        if(indexVal>2){
        indexVal=1;
        } });

Here is a working snippet for you:

$(document).ready(function() {
  $(".box").slick({
        dots: true,
    arrows: false
    });

});
var indexVal=1;
 $("#trigger-button").click(function(e){
        e.preventDefault();
       // slideIndex = $(this).index();
        $( '.box' ).slickGoTo(indexVal);
        indexVal=indexVal+1;
        if(indexVal>2){
        indexVal=1;
        }
    });

/*$('#trigger-button').click(function() {
  var slider = $('.box');
  slider[1].slickGoTo(parseInt(actIndex));
})*/ 

//Alternatively used

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/jquery.slick/1.3.6/slick.min.js"/></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/jquery.slick/1.3.6/slick.css"/>

<a class='btn' id='trigger-button' href='#'>Button 2</a>


<div class='box'>
  <div class='div-1'>
    Some content1
  </div>
  <div class='div-2'>
    Some content2
  </div>
</div>