Streaming live at 10am (PST)

[TUTORIAL] Thumbnails for a Webflow Slider without any custom code

This old trick is too simple and too awesome for not sharing it with everyone :slightly_smiling_face::woman_mage:t3:

How to add a Thumbnails to a Webflow Slider without any 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.

Live step-by-step guide: https://slider-with-thumbnails-simple.webflow.io
See or clone the project here: https://webflow.com/website/slider-with-thumbnails-simple

P.S. Can be used for the e-commerce pages as well

Respectfully,
Anna

18 Likes

Hey @sabanna

Thanks for sharing :webflow_heart:

1 Like

Exactly what I was looking for :heart_eyes:

2 Likes

Thank you for this. How can i integrate this with CMS? Im looking to use Product main image & more images?

Hi, @Dushaan! Do you mean that you want to use “more images” from the product inside the slider and as thumbnails?

@Dushaan I’m looking to do the same thing I think you were wanting to do… dynamically add thumbnails based on each Product’s ‘More Images’
Did you find a solution??

I’m actually surprised there isn’t a simpler way of doing this already. Surely it would be a well used functionality.

@sabanna - thanks so much for this tutorial. I’ve got it working but I’m getting a white outline around the thumbnails when they’re clicked. Do you have any ideas what might be causing this?

I think it is one of the default styles for the slider-dot component, most likely for increasing accessibility.

To remove it you would need to use custom CSS

@sabanna - Thank you! I set the focus box-shadow to none and that fixed it. You’re a life saver.

1 Like

You are welcome! Happy to help :slight_smile:

1 Like

Hey @sabanna, this is the closest I’ve gotten to what I need. What a clever solution!

Is there any way to make it so that the images change with each other to be more of a carousel rather than staying static? I’ve attempted linking several sliders up to the main slider but this was a terrible fail aha

Thanks for sharing!

Hi, @Dushaan! Do you mean that you want to use “more images” from the product inside the slider and as thumbnails?

Hi @sabanna, this is exactly what I’m looking for. I’ve managed to do this for the thumbnail but can’t figure it out for the product image inside the slider. I think its because I cant select which image to start the collection at.

Screenshot 2020-12-22 at 17.11.08

Did you find a solution for this please? Really appreciate any help :slight_smile:

Thanks

This is genius! Thank you Anna :slightly_smiling_face:

Hi @sabanna , I’ve used your tutorial to make slider thumbnails and it works great!!

But if I use collection to load images to slider and thumbnails, and use conditional visibility for the slides: Collection item has five image fields, if I upload three images, I need only three thumbnails in slider. The default navigation shows more dots, than i need. Any way to get rid of extra dots?

https://preview.webflow.com/preview/photorobot-cleaning?utm_medium=preview_link&utm_source=designer&utm_content=photorobot-cleaning&preview=b82af4340783d89a0c8c1b3dafb24405&pageId=6082ce3f16ba7385f54cb665&workflow=preview

Thank You

Matt

Hi @sabanna, I’m stuck on the last two steps, can’t seem to get the real slider navigation to adjust properly. Is this because I’m using a Collection List to load the images?

Thank you for your help!

Link: Webflow - ST Auto

Hi, @stroppypotato!

Apologies for the delayed response.
Do you still need help with the slider setup?

Hi Anna,

Thank you so much for posting this!

I’m still relatively new to this - please bear with me!
I tried your solution but I can’t seem to make it work. It drives me crazy!

I’ve actually gotten closer to what I need by using the WF Lightbox element and tweaking it – that’s what you’ll currently find in my read-only link below.
I was able to populate the thumbs with the right images from the CMS collection but I can’t figure out how to make the thumbnails clickable and for them to swap the main/large image accordingly.

What you show in your e-commerce example (blue shoes) is exactly what I need – just a slightly different layout.
I attached an illustration so you can see what I’m trying to achieve. Just to prevent confusion, the first row of thumbs need to trigger the main image swap (the second row of thumbs are just links to other product pages – you can ignore these).

Can you please help?!
Thank you!

Here’s my read-only:
Read-only:

Hi, @Rapha!

Here is a rough schema of how I would build the layout you need:

Hi Anna,

Thank you so much for taking your time!

Maybe I’m not being clear. If so, sorry for that!
The last thing I want is to waste your precious time.

You’re showing me how to build the layout. Thank you.
What you see in my screenshot (and what’s also in the read-only link) is what I’ve already built. What I struggle with though is not so much the layout.
What I can’t figure out is, as stated above, how I can make it so that when when you click on thumbnail A, the featured, large image frame now displays that image A. If you click thumb B the feature image is now B and so on (for ecommerce CMS of course) – just like you’re showing it in your gif sample (re-attached further below).
No popup! Just a swap of the existing feature image.
See illustration below.

Thank you for being patient! I hope you can help, I drives me bananas!
I’d really appreciate it – and from what I gather, it would help a lot of other people who seem to struggle with exactly that as well.

Annas_BlueShoe_SliderSample

Thanks for the clarification, @Rapha! I see now what is the exact problem here.

To make it “swap” you would need to use the Webflow Slider component, as I showed at the beginning of this tutorial.

Each slide should contain the big image and “fake thumbnails” would be made of a collection list connected to the same list of images.

Of course, the problematic part is to put correct images into the slides. Since you have a multi-image field, it is not quite possible at this point.

I am afraid you might need a different solution.