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-navigationposition: 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.
@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?
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
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.
Did you find a solution for this please? Really appreciate any help
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?
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?
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).
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.
