How to Make a Simple Image Slider With HTML, CSS and jQuery

Slideshows, image sliders, magic picture changing boxes: whatever you call them, the pattern is used all over the internet, so much so that nearly every website has one. If you’re a web developer, the time will come when you may have to build one on your own. With that in mind, let’s look at how we can build a simple image slider using HTML, CSS, and jQuery.

The HTML

We’ll start off by creating a container element, which has the class container. Inside of that lie our images. The images are wrapped with div tags, so the slides can be turned into links, or content other than images can be used as a slide. The first container div has some inline style that makes sure the first image in the slider will be visible on page load. There are also two button elements which are used to manually cycle through slides at the users request.

The CSS

This is where we set the width of the image slider, container divs, and the images inside of them. It’s important to note that all of our container divs are set to display: none;. If they weren’t, all of our images would be visible at the same time. We’ll use JavaScript to set a container div to display: inline-block;, while the rest remain hidden.

The JavaScript

First up, we need to define a few important variables. The first variable is currentIndex, and it is set to 0. The second variable is items, which is set to $('.container div'). This will return a list of container divs with images inside of them. The third variable is itemAmt, which is set to the length of our items variable. This last variable gives us the total amount of slides in our image slider.

Next, we create a function called ‘cycleItems’. This function will be used to display the correct image, while ensuring that the others stay hidden. Inside of this function, we create a variable called item. This variable is set to $('.container div').eq(currentIndex). The eq method provided by jQuery takes an integer, and will target the first item returned by $('.container div') that matches the integer. So if currentIndex is 0, $('.container div').eq(currentIndex) will target the first image container in our image slider. The next thing to do inside of our cycleItems function is to hide all of our image container divs, and set item to display: inline-block;.

To make sure that our images rotate automatically, we need to provide a way to continuously call our cycleItems function after a certain amount of time has passed. We do this by creating another variable called autoSlide. This variable stores a setInterval function, which takes a 3000 millisecond delay, or three seconds. Inside of that function, we increment the currentIndex variable by one, so that $('.container div').eq(currentIndex) will always reference the next container div. Then we define a very important ‘if’ statement. This statement says that if our currentIndex variable is greater than the total amount of images in our slider, reset the variable back to zero. If we didn’t have this if statement, we wouldn’t be able to cycle through our list of images. After the if statement, we call our cycleItems function.

Next we define our previous and next actions. These define what will happen when we click the previous and next buttons. They work like the autoSlide function, except they cancel the automatic cycling when clicked. To manually cycle through the slides, clicking the next button adds one to the currentIndex variable, while clicking the previous button subtracts one from the currentIndex variable.

The Demo

See the Pen JS pen #1 by SitePoint (@SitePoint) on CodePen.

Bonus

To see an image slider built using only CSS and HTML, check out this demo by Zack Wallace!