How to Display Thumbnails For Webflow Slider

Method

Step 1:

Drop two sliders on the page. Style the slides in the second slider to reduce the sizes of the slide so they look like thumbnails. Hide the slider dots if you don't want to show them, but DO NOT DELETE the nav dots from either slider.

Step 2:

Give the main slider an ID

Step 3:

Give the thumbnail slider a custom attribute data-thumbs-for with a value of # followed by the main slider's ID.

Step 4:

Go to the current page settings on the left toolbar (P). Under the Custom Code section in "Before </body> tag", paste this JavaScript code.

<script>
Webflow.push(function() {

  // When a thumbnail is clicked, update target slider
  $('[data-thumbs-for]').on('click', '.w-slide', function() {
  
    // Find target slider, if not found exit
    var target = $($(this).parents('.w-slider').attr('data-thumbs-for'));    
    if(target.length == 0) return;

    // Update target slider by triggering a "tap" event on the targetNav corresponding slide button
    target.find('.w-slider-nav').children().eq($(this).index()).trigger('tap');

   }); // End click function

}); // End ready function

</script>

Notes: