How to Display Thumbnails For Webflow Slider

Created this highly-requested tutorial for the community:
http://webflow-tricks.webflow.io/how-to-display-slider-thumbnails-for-webflow-slider

Screenshot_2018-11-25_171153

You are free to clone this project “Webflow Tricks” from my profile, so you can see how it works or copy it to your project.


Also, feel free to contact me for further code help and/or customization of third-party plugins.

7 Likes

Hey @samliew, thanks for the help. I knew I could count on you on that. Tag me in if you need a hand on something :smiley:

The best part about this script is you can have multiple pairs of sliders on the same page/site without modifying the code. The magic is in the data-thumbs-for attribute linking to each main slider ID.

2 Likes

thanks for the help. I knew I could count on you on that. Tag me in if you need a hand on something

Hello @samliew Thanks for the tutorial. I am looking to do something very similar. I would like to have a grid of images that control main slider when they are clicked. Can you help me out with the custom code and attribute I would need to accomplish this? Thank you.

@samliew thank you very much for this providing this solution. Very much appreciated.

Question: How would you go about applying styles to the various states of the thumbnails (e.g. default state at 30% opacity and selected state at 100% opacity).

Attached a visual for reference.

Thank you.

3 Likes

I would also be very interested in the answer to this ^

@samliew Is it possible to update this project using CMS Collections data?

1 Like

that would be great!

i know this is like 3 years old at this point… but any chance you ever found a solution to this?