How to code a website slider

Below is a collection of website sliders I've coded from scratch based on designs. I use basic HTML, CSS and Slick.js for the complex JavaScript functionality.

Responsive slider

Clean responsive slider using the all famous slick carousel from Ken Wheeler. Combining fontawesome, slick and a little custom CSS allows you to create this responsive modern slider.

Fullscreen minimal slider

A full screen responsive slider was one of the first interactive elements I ever implemented into a website somewhat 3+ years ago, and I still feel It's one of the most treasured website content blocks to this day. I couldn't have got there without the almighty slick slider by Ken Wheeler though, using slick with a little bit of custom CSS makes creating a slider a breeze.

Holiday slider

After building 1000's of sliders using various JavaScript slider libraries, slick always seems to win. Slick carousel makes creating custom sliders a piece of cake. I've mostly used this library when building custom WordPress themes that have slider functionality. Here I thought I'd get a bit festive and create a holiday based slider, hope you enjoy.

Domino slider

Custom website slider I built based on a design I found when browsing Dribble. Note, for simplicity I stuck to the fundamentals in this video, for production builds I recommenced using some form of bundler like Webpack or ParcelJS to concatenate and minify the stylesheets and scripts.

Fullscreen slick slider

In this video I code a fullscreen slider from scratch based on a dribble design by Natan Jabłoński. For simplicity I use the Slick.js jQuery library paired with some simple HTML and CSS. I really enjoy creating sliders, you may notice there's a fair few on my channel lol. I think it's because creating sliders were my first main obstacle when creating bespoke websites and Slick.js alleviated all the complex JavaScript functionality so I can focus on the custom styling. The aim in these videos is to show how simple it really is and I hope that shines through and helps you on your next custom slider build.

JOIN

My weekly newsletter

Summarizing all my weekly coding content including live code examples, blogs, YouTube tutorials and Instagram carousels.