title: Slick GoTo with custom slider navigation won't work
body: <p>I created a slider with a custom slider navigation. Here is the code looks like:</p>
  
  <pre><code>&lt;!-- Slider Parent --&gt;
  &lt;div class="col-md-6 col-xs-12"&gt;
        &lt;div class="gallery slider-parent"&gt;
          &lt;% @activity.galleries.each_with_index do |gallery, index| %&gt;
            &lt;%= image_tag gallery.documentation.url(:large, width: '100%') %&gt;
          &lt;% end %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Slider Navigation --&gt;
      &lt;div class="col-md-6 col-xs-12"&gt;
        &lt;div class="slider-nav"&gt;
          &lt;% @activity.galleries.each_slice(3) do |galleries| %&gt;
            &lt;div class="row"&gt;
              &lt;% galleries.each do |gallery| %&gt;
                &lt;div class="col-md-4"&gt;
                  &lt;a href="#"&gt;&lt;%= image_tag gallery.documentation.url(:medium) %&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;% end %&gt;
            &lt;/div&gt;
          &lt;% end %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and here's the JS looks like <code>application.js</code>:</p>
  
  <pre><code>// Image gallery
  $('.gallery').slick( {
    autoplay: true,
    arrows: false
  });
  
  var $parent = $(".gallery.slider-parent");
  var $nav = $(".slider-nav").find("a");
  
  $nav.click(function(e){
    e.preventDefault();
    slideIndex = $(this).index();
    $parent.slick('slickGoTo', parseInt(slideIndex) );
  });
  </code></pre>
  
  <p>However the Slider Parent won't match the Slider Navigation that I clicked. I think the issue is that the <code>$nav = $(".slider-nav").find("a");</code> won't sync the slider parent. I tried to change the Slider Navigation Code to looks like this:</p>
  
  <pre><code>&lt;!-- Slider Navigation --&gt;
  &lt;div class="col-md-6 col-xs-12"&gt;
        &lt;div class="slider-nav"&gt;
          &lt;% @activity.galleries.each do |gallery| %&gt;
            &lt;a href="#"&gt;&lt;%= image_tag gallery.documentation.url(:medium) %&gt;&lt;/a&gt;
          &lt;% end %&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And it works. However, the slider navigation don't have style like I want. Any suggestions?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried to find keyword to locate deepest elements with jQuery and I found this:</p>
  
  <pre><code>  // Select deepest child elements
    (function( $ ) {
    $.fn.deepest = function(selector){
        var targ = $(this);
        var result = [];
  
        //If there is no selector just drill down to the furthest child
        if (typeof (selector) === 'undefined') {
            selector = "*";
            while ( $(targ).children(selector).length ) {
                targ = $(targ).children(selector);
            }
            return targ;
        };
  
        //Get to the deepest point from which the selector can be seen
        while ( $(targ).find(selector).length ) {
            targ = $(targ).children('*');
        }
  
        //Only keep the elements that match the selector
        targ = $(targ).each(function(i, obj){
            if ($(obj).is(selector) ) {
                result.push(obj)
            }
        });
  
        return $(result);
    };
    })( jQuery );
  
   // Image gallery
   $('.gallery').slick( {
     autoplay: true,
     arrows: false
   });
  
   var $parent = $(".gallery.slider-parent");
   var $nav = $(".slider-nav").deepest('a');
  
   $nav.click(function(e){
     e.preventDefault();
     slideIndex = $(this).index();
     $parent.slick('slickGoTo', parseInt(slideIndex) );
   });
  </code></pre>
  
  <p>I use the console to check the <code>$(".slider-nav").deepest('a');</code> and it located well but still the slider navigation doesn't work.</p>
  
  <p><strong>UPDATE #2</strong></p>
  
  <p>I tried Christos Lytras method to debug and find which one doesn't work.</p>
  
  <p>I run <code>jQuery(".gallery.slider-parent").slick('slickGoTo', 2);</code> and it works.</p>
  
  <p>Then I modified the code to add this code <code>console.log("Slide index:", slideIndex, parseInt(slideIndex));</code>. Whenever I clicked any image in nav (slide index, 2,3, or 4) It always printed Slide index: 0 0.</p>
  
  <p>So, the problem is there but then how I fix it? It seems that the javascript <code>$nav</code> is not running on click because the all of the slider index on $nav is set to 0 because it is located in the different columns and rows. Any solutions?</p>