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.
