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.
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.
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: inline-block;, while the rest remain hidden.
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
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
To see an image slider built using only CSS and HTML, check out this demo by Zack Wallace!
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja