Create Responsive Slider with jQuery and CSS3 [ Awesome Guide ]

If front end development is one of your responsibilities then you must have already used one of many great jQuery slider plugins available online. If not, then it’s only a matter of time before you use one. There may come a time when you will need to create a slider of your own. In this tutorial, let’s learn how to create a simple responsive slider with jQuery and CSS3.

Here’s a sneak peek of what we are making. Use a modern browser as I have skipped all vendor prefixing!

We are using relative positioning for our slider wrapper and its elements.

.slider-box,
.slider__item {
position: relative;
}

Next, is a very critical CSS for our slider which needs to have it’s overflow property set to hidden.

.slider {
overflow: hidden;
}

After that, we are setting a CSS for an element which is not available in our HTML.

.slider__canvas {
transition: transform 0.5s;
}

The above element will act as the sliding canvas. Our slider will be powered by hardware accelerated CSS3 animations. You can control the slide animation time by setting the CSS animation-duration property.

And the final CSS sets the slide items float property. This is yet another critical CSS needed for our slider to work.

.slider__item {
float: left;
}

The JS

And now, the most important stuff, the JS itself. Before we get to the code part, let me explain how this works. We will be creating a jQuery plugin. It’s the most simple and efficient way to make jQuery code reusable.

Our slider will be event driven. We will trigger custom events and act on those events. All features like navigation, autoplay will be controlled by triggering events on the slider element. This will fulfill our goal of creating a clean API for the developers

Elements floated to the left appear next to each other as long as the parent width is not exceeded. We will use this as our base. We will set the parent element width equal to the width of all slides. The parent element is slider__canvas. This element will be injected using JavaScript.

The slider animations will be powered by hardware accelerated CSS3 animations. We will move slider__canvas element using CSS3 translate3d. The animation duration, as mentioned earlier can be controlled by using CSS3.

Where needed, we will add additional active class to enable better animations and styling using CSS3.

First up, we set the slider element to respond to a custom prev.slider event. Here, prev is the event and slider is our unique namespace. Throughout this tutorial, we will use slider namespace.

this.$element.on('prev.slider', this.prev.bind(this));

Notice that we are using bind – this is needed to fix the context of this inside our handler. The bind function is pretty safe to use and is supported on all major browsers including IE 9 and above. You can also use jQuery.proxy but I will stick with bind in this tutorial.

The previous action element will trigger our custom event prev.slider on the slider

We trigger the update.slider custom event when the window is resized and window load is complete. Our slider will resize itself accordingly. It will also adjust the slider when all images have been loaded.

The autoplayClear function simply checks whether there is an autoplayId variable set and if set it calls clearTimeout to clear any Timeout associated with that id.

After clearing any existing Timeout , the function checks if autoplay is enabled. If autoplay is enabled, the function sets a Timeout that uses an anonymous function to trigger next.slider and autoplay.slider events on the slider element after the autoplayTime interval.

After handling the autoplay, we register autoplayOn.slider event.

this.$element.on('autoplayOn.slider', this.autoplayOn.bind(this));

When this event is triggered on the slider element, the handler turns autoplay on.

Conclusion

This concludes this tutorial. The above code is licensed under MIT. Feel free to use it for any purpose you like. Hope this tutorial helped you in some way and you learned something new. Please leave your feedback in the comments section below.