The simplest Splide slider tutorial
Are you looking for an easy Splide slider tutorial? 🚀
If you want simple way to create sliders and carousels with Splide, you’re in the right place!
I’ve been using Splide for years to build sliders on my websites – it’s an incredible library. But I know that getting started can feel a bit overwhelming. That’s why I’ve put together this blueprint to help you set up your own sliders as quickly as possible.
Splide slider tutorial
Check out the full source code of the slider.
For this project, I used:
✅ Splide (loaded via CDN by jsDelivr)
✅ Lucide (open-source icon library)
✅ Unsplash (for nature images – all image links are in the JS tab on CodePen)
In the video, I walk you through:
✔️ The minimal CSS styles you need, making customization easier
✔️ Bullet animations and blurred background arrows (a cool touch I use in my projects)
Quick start guide
- Copy the HTML from Splide’s Getting Started section
- Add the Splide files via CDN (jsDelivr)
- Use
splide-core.min.css(keeping it minimal for easy styling) - Customize bullets and arrows for a unique look (Check CodePen for details)
- Initialize Splide with your desired options
With these steps, you’ll have a professional, smooth, and fully functional slider in no time!
💬 Have questions or feedback? Let me know! I’d love to hear from you! 👨🏻💻