Template
You can find the template here.
Steps to do it
1. Adding the Slider
Integrate the Webflow native slider component into your preferred location on the webpage.
2. Applying CSS Styles to the Slider Mask
3. Adding a Matching Div
Webflow’s slider mask layout is unalterable by default. To achieve our objective, introduce a div outside the slider, mirroring the CSS styles of the slider mask.
4. Layout Adjustment
Modify the div’s layout to impact the slider mask’s layout.
5. Customizing Slide CSS Styles
By this stage, the desktop slider mask layout is already adjusted. Customize the CSS styles for the slides within the slider, setting the card width to 25% (assuming four slides, divide 100% by 4; adjust as needed).
6. Hiding Arrows and Slide Navigation
Post-adjustment, this is the slider’s appearance. Desktop doesn’t require slider arrows or navigation, so hide them with “display: none.”
7. Desktop View Completed!
The updated look is displayed in the image below.
8. Mobile Slider Adjustment
Now, let’s optimize the slider for mobile to restore Webflow slider functionality.
9. Altering CSS Styles
Use a div with matching styles to reset the slider mask layout to static. Adjust slide width to 100%.
10. Displaying Arrows and Slide Navigation
Enable left and right arrows and slide navigation as necessary.
11. Removing the Div
Eliminate the div on the page with matching styles to the slider mask.
12. Fine-Tuning the Appearance
Feel free to exercise creativity and fine-tune CSS styles as required within these foundational steps, and you’re all set!