How can Thumbnails be added to a Webflow Slider without using custom code?

To add thumbnails to a Webflow slider without using custom code, you can follow these steps:

1. First, create a new Collection in your Webflow project. Let's say the Collection is called "Slider Thumbnails".

2. Within the "Slider Thumbnails" Collection, add a reference field that links it to the Collection where your slider images are stored. This will allow you to associate each thumbnail with its corresponding slider image.

3. Add an image field to the "Slider Thumbnails" Collection. This field will hold the thumbnail image for each item.

4. Now, go to the page where you have the slider and open the Designer.

5. Drag and drop a Collection List element onto your page where you want the thumbnails to appear.

6. Bind this Collection List to the "Slider Thumbnails" Collection you created earlier.

7. Within the Collection List, add an image element and bind it to the thumbnail image field from the "Slider Thumbnails" Collection.

8. Style the Collection List and image element according to your design preferences, such as adjusting the dimensions, spacing, and any additional styling you might want.

9. Finally, connect the thumbnails to the slider images. To do this, select the Collection List item that contains the thumbnail image and go to the Interactions panel.

10. In the Interactions panel, create a new interaction on the thumbnail image element, such as a click interaction.

11. Within the interaction, add an action to show/hide the slider element (e.g., a slider element) and choose the relevant slider image based on the reference field of the "Slider Thumbnails" Collection item.

12. Preview your site and test the functionality. Each time a thumbnail image is clicked, it should display the corresponding slider image in the main slider.

By following these steps, you can add thumbnails to a Webflow slider without the need for custom code.