Need Help Hacking A Solution For Multiple Sliders

Design help Animations & Interactions
1

Hey All,

I’ve asked a few other times and haven’t gotten a response. I assume because I’m not asking it correctly.

I built a site for a friend that has several sliders on the same page (link at the bottom of the page). I want to link some thumbnails to their respective sliders, so that once clicked the corresponding slide will appear. Unfortunately, the javascript I have only works if there’s one slider on a page. Currently, it’s not possible to replace the slider navigation in WebFlow with images.

Now I’m wondering if there’s another way I could accomplish this… through interactions perhaps?

I’d really love some help… even if someone can point me in a helpful direction.

Here’s a diagram of what I’m trying to do:

Slide-Explanation
Slide-Explanation1200×1724 63 KB

This is a screenshot of just one of the sliders on the page. I want to be able to click on the La Salsa logo for example, and have it go to that slide. The javascript I have is only for when there’s one slider.

Screen Shot 2020-02-20 at 4.45.39 PM
Screen Shot 2020-02-20 at 4.45.39 PM2960×1790 534 KB

Brand Aggregate

2

Hello @LunarLight,

yes there is a way to do just that, the great @sabanna made a clonable project on how to add thumbnails to the slider element without custom code, here it is https://webflow.com/website/slider-with-thumbnails-simple and here is the tutorial she posted on the forum [TUTORIAL] Thumbnails for a Webflow Slider without any custom code I hope this helps.

1 Like
3

OMG @Pablo_Cortes. You are my hero. And @Sabanna is my hero. You both are my hero! I see what she did there… so ingenious. How many other incredibly elegant solutions am I missing!!!

I’ve been agonizing over this for several weeks…

2 Likes
4

Hey @LunarLight,

Yes @sabanna is great, she is my hero too. She has a lot of very useful tutorials on the forum, you should check them out. Im glad I was able to help you!

1 Like