Slick custom navigation

slick-custom-navigation.js

(function($) {
    $(function() {

        // Activate custom navigation for Slick
        $('[data-slick-navigation]').slickNavigation();

        // Activate slick slider
        $('#custom-slick-slider').slick({
        });

    });
  })(jQuery);

(function($, window, document, undefined) {
  
  /*
  Create custom navigation that points to the Slick slider instance:
  
  <ul data-slick-navigation="#custom-slick-slider">
    <li><a href="#">Slide 1</a></li>
    <li><a href="#">Slide 2</a></li>
  </ul>
  
  <div id="custom-slick-slider">
    ...
  </div>
  */
  $.fn.slickNavigation = function() {
    return this.each(function() {
      var navigation = $(this),
          slider = $(navigation.data("slick-navigation"));
    
      navigation.find("li:first").addClass("active");
  
      navigation.find("li").each(function(index) {
        var link = $(this).find("a");
  
        link.data("slide", index);
        link.on("click", function(e) {
          e.preventDefault();
          
          navigation.find("li").removeClass("active");
          $(this).parents("li").addClass("active");
    
          slider.slick("slickGoTo", $(this).data("slide"));
        });
      });
    });
  };
})(jQuery, window, document);

$("[data-slick-navigation]").slickNavigation();