Slick GoTo with custom slider navigation won't work

Question

I created a slider with a custom slider navigation. Here is the code looks like:

<!-- Slider Parent -->
<div class="col-md-6 col-xs-12">
      <div class="gallery slider-parent">
        <% @activity.galleries.each_with_index do |gallery, index| %>
          <%= image_tag gallery.documentation.url(:large, width: '100%') %>
        <% end %>
      </div>
    </div>

    <!-- Slider Navigation -->
    <div class="col-md-6 col-xs-12">
      <div class="slider-nav">
        <% @activity.galleries.each_slice(3) do |galleries| %>
          <div class="row">
            <% galleries.each do |gallery| %>
              <div class="col-md-4">
                <a href="#"><%= image_tag gallery.documentation.url(:medium) %></a>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>

and here's the JS looks like application.js:

// 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) );
});

However the Slider Parent won't match the Slider Navigation that I clicked. I think the issue is that the $nav = $(".slider-nav").find("a"); won't sync the slider parent. I tried to change the Slider Navigation Code to looks like this:

<!-- Slider Navigation -->
<div class="col-md-6 col-xs-12">
      <div class="slider-nav">
        <% @activity.galleries.each do |gallery| %>
          <a href="#"><%= image_tag gallery.documentation.url(:medium) %></a>
        <% end %>
      </div>
 </div>

And it works. However, the slider navigation don't have style like I want. Any suggestions?

UPDATE

I tried to find keyword to locate deepest elements with jQuery and I found this:

  // 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) );
 });

I use the console to check the $(".slider-nav").deepest('a'); and it located well but still the slider navigation doesn't work.

UPDATE #2

I tried Christos Lytras method to debug and find which one doesn't work.

I run jQuery(".gallery.slider-parent").slick('slickGoTo', 2); and it works.

Then I modified the code to add this code console.log("Slide index:", slideIndex, parseInt(slideIndex));. Whenever I clicked any image in nav (slide index, 2,3, or 4) It always printed Slide index: 0 0.

So, the problem is there but then how I fix it? It seems that the javascript $nav 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?

Answer 1

Some steps to do for debugging:

Open console tab (F12 on Windows) and check if the selector jQuery(".gallery.slider-parent") returns the slider. It should print the slider DOM object at console window.

Then try to change the slide from inside the console window, by running the slick('slickGoTo') directly:

jQuery(".gallery.slider-parent").slick('slickGoTo', 1);
jQuery(".gallery.slider-parent").slick('slickGoTo', 2);
// etc.

The slides should change on each call with a different index.

Then try to debug the $nav onclick event:

$nav.on('click', (function(e) {
    e.preventDefault();
    slideIndex = $(this).index();

    // This should print the clicked slide index
    console.log("Slide index:", slideIndex, parseInt(slideIndex));

    // And this should print the $parent $parent = $(".gallery.slider-parent") DOM object
    console.log("The $parent is:", $parent);

    $parent.slick('slickGoTo', parseInt(slideIndex));
});

You should complete and get the proper results out of each step. It would be nice to create a fiddle or a code sample and attach it in your question.

UPDATE

The problem is that because you enclose the <a> $nav anchor inside a <div>, the anchor index will be always 0 because it will be the one and only element of its' parent. To get the slides indexes, use $(this).parent().index() inside the click event function like this:

$nav.on('click', (function(e) {
    e.preventDefault();
    // Here we get the parent index because the anchor link is the one-and-only child of its' parent
    slideIndex = $(this).parent().index();

    // This should print the clicked slide index
    console.log("Slide index:", slideIndex, parseInt(slideIndex));

    $parent.slick('slickGoTo', parseInt(slideIndex));
});