How can Thumbnails be added to a Webflow Slider without using custom code?
TL;DR
- Create thumbnail images using static elements or CMS collections, positioned near the Slider to represent each slide.
- Add click interactions to each thumbnail using "Go To Slide" actions to navigate the Slider, and optionally use interactions to highlight the active thumbnail.
To add thumbnails to a Webflow Slider without using custom code, you can use the native CMS and interaction tools to simulate thumbnail functionality.
1. Use CMS or Static Image List as Thumbnails
- Create image thumbnails manually in your project by placing a series of images (or CMS collection list) below or beside the Webflow Slider.
- These thumbnails should visually represent each slide in your slider.
2. Create a Webflow Slider
- Add a Slider element from the Add panel.
- Add your slides and images to each slide, matching the order of your thumbnails.
3. Use Webflow Interactions to Simulate Click-to-Slide
- For each thumbnail image, add a Mouse Click (Tap) interaction.
- In the interaction, use the Slider > Go To Slide action and specify the correct slide index (e.g., first thumbnail goes to Slide 1, second to Slide 2, etc.).
- Repeat this process for all thumbnails, linking them to the appropriate slide.
4. Sync Active States (Optional)
- To show which thumbnail is active, use a combination of:
- Slider Change Trigger (to detect when the slide changes),
- Element triggers or custom states (to highlight the active thumbnail).
- Use Add/Remove Class actions in your interactions to change the appearance of the currently active thumbnail.
Summary
You can simulate thumbnails in a Webflow Slider using static images or CMS lists, combined with Interactions that jump to the desired slide. Although it’s not a built-in feature, this approach requires no custom code and achieves thumbnail-driven navigation.