Simple image slider using HTML5, CSS3 and jQuery.
I’m going to go through a step by step guide on how to make a simple image slider using HTML5, CSS3 and jQuery. The simple slider will have two arrow buttons to allow the user to select the next or previous photos. At the end of the photo queue, the slider will cycle through the pictures from the beginning of the queue. Three files will be required: index.html, styles.css and app.js.
Step 1 : HTML file
First, let’s setup our html file like the below.
You will need to add the font-awesome cdn because we will be using the arrow icons for the next and previous navigation for the images. And of course the jQuery cdn will need to be included. In the html we will make a div with a class of sliderContainer to contain our images. I’ve setup 4 pictures in the slider queue. The div with a class of nextCircle will be our mark up for the next navigation button and the div with a class of prevCircle will be our mark up for the previous navigation button.
Step 2: Style the slider
Next step is to style our slider. The final css code will look like the below.
I’ve given the slider container a width of 80%. It is important to set overflow:hidden on the slider container so that when we move the images left and right, we will not see anything outside the container. Next we will set the first image to display on the screen and all other images to be outside the container on the left hand side by setting the position of left:-100%. And finally I provide styling to the left and right arrow font-awesome icons and make a circle around them for the navigation buttons and position them. The previous arrow will sit on the left hand side and in the middle of the picture that is displayed and the next arrow will sit on the right hand side in the middle of the picture that is displayed.
Step 3: The jQuery
Next come the trickier part. We will have to visualize how the images need to move when the left or the right navigation button is pressed. The finish code looks like the below.
First we need to setup an event listener on click for the next button. Inside the event listener function, we need to keep track of which images need to be rotated and this is achieved with the counter i. Once we determine which image needs to be displayed (currentImg) and which image needs to slide off the screen (prevImg) we call the animateImage function to animate the images. Because the images can go both left and right, we do not know the exact location of which side off the container the image we want to display is currently sitting. So inside the animateImage function, we first move the image we want to display off to the left of the container so that when we animate it, it will slide from left to right. Once the image we want to display is positioned to the left of the container, we animate it from left to right. Simultaneously, we want to animate the image to be moved off the screen (prevImg) from left to the right, ending off to the right of the container. Similar logic is used for the previous button except when the previous button is clicked, we want the images to move from right to left.
The final product is posted on GitHub here: https://amyscript.github.io/jQuery-Slider/
Hope you had fun building this simple image slider!