Slider with thumbnails
without custom code

1. Adding a Slider to the Page

This step is pretty straight forward. Just add a Webflow Slider component to the page where you want it to be.

2. Creating a "fake" slider navigation

• Add a div inside the slider and move it under the real slider nav. Give it a class-name, in my case I called it .slider-navigation

‍

• Inside this .slider-navigation add another div. It will become a thumbnail wrapper. I assigned the div a class-name of .slider-thumb-wrap .
  Set its size accordingly to your needs, but it will work best if the thumbnails are square.

‍

‍

• Add an image element inside the .slider-thumb-wrap. In my example, I gave it a class-name of .slider-thumb-image. Style and position the image as needed.

‍

‍

You also might set thumbnail-images as background images on thumbnails. However, it would require creating combo-classes for each thumbnail. I prefer not doing so, because it makes it more complicated.
‍

My thumbnail image corresponds to the big image on the slide, but your design may require something else. Just make sure you are adding the correct image to the thumbnail.

‍

• Duplicate the .slider-thumb-wrap element several times in order to get the right amount of thumbnails, one for each slide.

‍

• Select the .slider-navigation again and give it the same height as your thumbnails have.
  Then make .slider-navigation position: absolute and apply a z-index. Using absolute positioning presets you can position it at the bottom of the slider or adjust it with positioning widget.

3. Adjusting the real slider navigation

• Select the real slider nav element inside the slider and give it the same class-name as you used for the "fake one". In my example, it is .slider-navigation (it will apply the same size and position to the nav element)

‍

‍

• Add a combo-class to the "real nav" ( I used .slider-navigation.default). It will allow the changing of parameters without breaking previous settings.
• Make the z-index greater than the z-index of the custom made slider navigation (it will move this element to the top "layer") and change the font-size to be equal to the height of the .slider-thumb-wrap elements.

‍

‍

• Switch to the Settings Panel and in the slider settings area make the following changes:
  - uncheck the "Rounded" option to make the nav dots square;
  - check the "Invert colors" option to make the nav dots more visible;
  - change the "Horizontal spacing" parameter to adjust the nav dots position so they would cover thumbnail images of those in the custom navigation.

‍

• The final step is to reduce the default slider navigation's opacity on the Style Panel. It can be set to 0%, but I suggest giving it a value between 5% and 7%. This gives the thumbnail of the active slide a slight shadow allowing the user identify the thumbnail selected.