Tutorial Tuesdays: How to Add Slider Boxes to a Website

Slider boxes have become incredibly popular over recent years. They give website managers the ability to showcase more content on a cool rotating visual element. Not only does it catch a visitor’s attention, it also improves UX by giving users the ability to access that content at their own pace by triggering the next slide. They’re one of the easiest ways to showcase anything about your organization – from a client roster, customer testimonials, reviews, and images.

Using Slick Slider, you can create a sliding carousel that show cases your content in a user friendly way.

With this tutorial, give yourself an added element of fun and functionality to your website design.

Below is the HTML, CSS, and JavaScript required:

HTML

To create your slider box section, first create the parent class to house all of the individual slides. In this example, we use the parent class of "testimonial-carousel". With that in place, each individual box/slide can be created with the basic markup:

CSS

The boxes that make up each individual slide are controlled strictly with some basic CSS. With a slight border radius and margins on either side of the box, we can create a standard style that will render nicely on all devices.

JavaScript

Lastly, we must initiate the slider itself by targeting the parent class. Using Slick Slider's built in responsive breakpoints, we can indicate how many boxes to show on certain devices:

By using the above code, your website can have a streamlined way to show off multiple elements while giving that information at a pace that's user (UX) friendly.