how to add thumbnails to dots of slick slider mentioning the current slide

Question

I am currently working on a new project which required a slider. I have implemented slick JS for one of my project.

Now I need to add thumbnails which will appear when

Answer 1

You may replace dots with custom thumbnails. You would need to add thumbnails somewhere (for example, in a hidden div inside the image slide wrapper. See the code for reference:

$('.slideme').slick({
  dots: true,
  customPaging: function(slider, i) { 
    // this example would render "tabs" with titles
    return '' + $(slider.$slides[i]).find('.slide-title').text() + '';
  },
});

You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails