Can't get slickGoTo working for custom slick navigation

Question

Trying to use slick carousel and use my own custom icons for navigation instead of the default thoughts. I thought the best way to do this would be to set up my own list and use slickGoTo, but I can't get it to work.

$(document).ready(function(){

    $('.rps-slider').slick({
      infinite: true,
      arrows: true,
      dots:true
    });

    $(".slick-nav li a").click(function(e){
      var slideIndex = $(this).index();
      $( ".rps-slider" ).slickGoTo(parseInt(slideIndex));
    });

  });

jsfiddle here: http://jsfiddle.net/r7vjy7as/

Tancred

Answer 1

Use $( ".rps-slider" ).slick('slickGoTo', parseInt(slideIndex));

Cuttlebone

Also, set slideindex to track the index of its parent 'li', because the index of 'li a' will always be 0, 'a' being the only element inside the 'li'. var slideIndex = $(this).parent().index(); – Forcemeat