slick carousel slickGoTo doesn't work

Question

I'm using the slick carousel class for a slider. HTML:

<div class="map">
  <div>
    <div class="step">
      <div class="m_left"><a href="#" class="next-slide"> nextPage</a></p>
      </div>
      <div class="m_right"><img src="/bindella/images/map_tsc.jpg"></div>
    </div>
  </div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
</div>  

JS:

$(document).ready(function() {
  $('.map').slick({
    centerMode: true,
    adaptiveHeight: true
  });

  $('.next-slide').click(function() {
    $('.map').slickGoTo(1);
  });
});     

The function slickGoTo doesn't work. What is wrong?

Answer 1

Please try:

$('.slider').slick('slickGoTo', number);

Answer 2

Try something like this mate.Its a small work around

$('.next-slide').click(function() {
  var slider = $('.map');
  slider[0].slick.slickGoTo(parseInt(2));
});              

Fiddle here