Generate portfolio slides

How to in Webflow

1. Open Webflow Designer: Open your Webflow project and navigate to the page where you want the portfolio slider.
2. Add Slider to Page: From the Add Panel on the left, drag a Slider component onto the canvas inside the chosen section. It will stretch to the full width of its parent.
3. Add Slides: With the Slider selected, press D to open the Element Settings Panel, then click + Add Slide. You can also right-click a slide on the canvas and choose Duplicate.
4. Duplicate Slides: Alternatively, duplicate an existing slide by right-clicking it in the canvas and selecting Duplicate.
5. Arrange Slides in Navigator: Use the Navigator panel to reorder slides by selecting a slide and dragging it to a new position.
6. Add Background to Slide: Select a slide and either drag an Image element into it or set a background image on the slide. Create a class and reuse it across slides.
7. Set Background Properties: On the slide's class, set Background Size to Contain and Background Position to Center to keep content visible.
8. Add Content on Slide: Drop a container inside the slide and add a Heading and a Paragraph to describe the piece.
9. Open Slider Settings: Select the Slider, then press D to open the Settings Panel and review available options.
10. Configure Animation: In Settings Panel, choose an Animation Type (e.g., Slide or Fade) to control how slides move.
11. Adjust Easing and Duration: In Settings Panel, select an Easing method and set Duration to control transition timing.
12. Enable Swipe Gestures: In Settings Panel, enable Swipe gestures for touch devices.
13. Set Auto Play: In Settings Panel, turn Auto play ON, set the delay for the first slide, and specify how many slides to loop.
14. Arrows and Navigation: In Settings Panel, configure First and Last Slide arrows, and adjust Slide nav controls for spacing, shape, and color.
15. Resize and Position: Select the Slider and adjust its height in the Styles Panel. Consider using vh units for responsiveness.
16. Customize Arrows: To change arrow icons, replace the icon inside the left/right arrow elements or add your own images. Apply a dedicated class to target styling.
17. Style Dots (Optional): Adjust dot size and color in the embed CSS for .w-slider-dot and .w-slider-dot.w-active.
18. Show 3 Slides at Once: To create a 3-slide carousel: assign the same slide class to all slides, set width to 33.33% on desktop and 100% on mobile.
19. Populate with Collection Content: Webflow sliders can't auto-populate with dynamic content. Use a Collection List in each slide and limit to one item; duplicate slides and adjust the start item.