BLOG

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

Get that developer job

Get the exact CV template I used to attain two full time developer jobs and healthy freelance clients when you sign up to my newsletter.