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!
Frequently Asked Questions (FAQs) about Making a Simple Image Slider with HTML, CSS, and jQuery
How can I add more images to the slider?
To add more images to the slider, you need to add more div elements in the HTML code. Each div element represents one slide. Inside the div, you can add an img tag with the source attribute pointing to the image you want to add. Remember to add a unique id to each div for easier manipulation with CSS and jQuery.
Can I add captions to the images in the slider?
Yes, you can add captions to the images. To do this, you can add a p tag or a span tag inside the div that contains the image. You can then style the caption using CSS to position it over the image and make it stand out.
How can I make the slider automatically transition between images?
To make the slider automatically transition between images, you can use the setInterval function in jQuery. This function allows you to execute a piece of code at specified intervals. You can use it to trigger the next button click event every few seconds.
How can I add navigation dots to the slider?
To add navigation dots, you need to create a new div in the HTML code for the dots. Each dot can be represented by a span element. In the jQuery code, you can add a click event to each dot that will change the current slide to the corresponding slide.
Can I use this slider on a responsive website?
Yes, you can use this slider on a responsive website. The slider’s width and height can be set in percentages in the CSS code, which will make it adjust to the screen size. However, you might need to adjust the size of the images and the positioning of the elements for different screen sizes.
How can I change the transition effect between slides?
The transition effect between slides can be changed in the CSS code. You can use the transition property to specify the duration and type of transition. For example, you can use ‘ease-in-out’ for a smooth transition, or ‘linear’ for a constant speed transition.
Can I add a fade effect to the slider?
Yes, you can add a fade effect to the slider. This can be done in the jQuery code by using the fadeIn and fadeOut functions when changing slides. You can also specify the duration of the fade effect.
How can I add a pause on hover functionality to the slider?
To add a pause on hover functionality, you can use the hover function in jQuery. This function takes two arguments: a function to execute when the mouse enters the element, and a function to execute when the mouse leaves the element. You can use it to stop and restart the automatic transition.
Can I use this slider with images of different sizes?
Yes, you can use this slider with images of different sizes. However, you might need to adjust the CSS code to make sure the images fit properly in the slider. You can use the object-fit property to specify how the images should be resized to fit their container.
How can I add a fullscreen button to the slider?
To add a fullscreen button, you can create a new button in the HTML code. In the jQuery code, you can add a click event to the button that will change the size of the slider to the size of the screen. You can use the fullscreen API to do this.
Tim Evko is a front end web developer from New York, with a passion for responsive web development, Sass, and JavaScript. He lives on coffee, CodePen demos and flannel shirts.