There are many ways to create slideshows for your website. You could use the carousel that Bootstrap has in their JavaScript section. The JavaScript library jQuery is also another great way to create a carousel. In this post though we are going to use JavaScript for the functionality of our carousel.
First we are going to create an html document to give our carousel a home.
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<link rel="stylesheet" type="text/css" href="css/styles_slideshow.css">
</head>
<body onload='runSlideshow()'>
<header>
<h1>JavaScript Slideshow<h1>
</header>
<div id="viewer">
<div>
<img id="arrow_left" src="img/left_arrow.png" alt="left arrow">
</div>
<div>
<img id="arrow_right" src="img/right_arrow.png" alt="right arrow">
</div>
<div class="image">
<img id="image_1" src="img/image_1.JPG" alt="beach with hills in the background"/>
</div>
</div>
<footer>
<p>Christina Cannito - JavaScript Slideshow - 2014</p>
</footer>
<script type="text/javascript" src="js/slideshow.js"></script>
</body>
</html>
Above we have a simple html page to get us started on our carousel. Inside the <head> tag we have the <title> of the html page and a link to a CSS style sheet. After the head we go to the <body> tag where there is “onload=’runSlideshow()'”. What this means is that as soon as the body loads the “runSlideshow” function is going to be called. That function is defined in our JavaScript file, which we will be looking at shortly. Inside the body we have a <header> tag, a div with an id of “viewer” which has several divs inside of it, a <footer> tag and lastly a link to our JavaScript file.
The div with the id of “viewer” is going to be where all the images for our carousel will be displayed. The next two divs inside “viewer” hold our left and right arrows. Lastly there is a div which holds a placeholder image with the class of “image”. Now lets see how JavaScript works with this page to set the carousel in motion.
"use strict";
var index_num = 0;
var image_array = ["image_1", "image_2", "image_3", "image_4", "image_5"];
var leftClick = document.getElementById('arrow_left');
var rightClick = document.getElementById('arrow_right');
var imageViewer = document.getElementById('image_1');
function createLinkedImage(domContainer, imgArray, index){
domContainer.src = './img/' + imgArray[index] + '.JPG';
}
function runSlideshow() {
leftClick.addEventListener('click', function(){
if (index_num === 0) {
index_num = image_array.length - 1;
createLinkedImage(imageViewer, image_array, index_num);
} else {
index_num = index_num - 1;
createLinkedImage(imageViewer, image_array, index_num);
}
}, true)
rightClick.addEventListener('click', function(){
if (index_num === image_array.length) {
index_num = index_num - 1;
createLinkedImage(imageViewer, image_array, index_num);
index_num = 0;
} else {
createLinkedImage(imageViewer, image_array, index_num);
index_num = index_num + 1;
}
}, true)
setInterval(function(){
if (index_num > image_array.length - 1) {
index_num = 0;
createLinkedImage(imageViewer, image_array, index_num);
}
createLinkedImage(imageViewer, image_array, index_num);
index_num = index_num + 1;
}, 3000);
}
Lets start by looking at the variables that are defined at the top of the document.
- var index = 0; This is how we are going to keep track of the index number as we iterate over the array of images that we want to display.
- var image_array = [“image_1”, “image_2”, “image_3”, “image_4”, “image_5”]; An array of all the images that we are going to display.
- var leftClick = document.getElementById(‘arrow_left’); We are targeting the the element in the html document with the id of “arrow_left”.
- var rightClick = document.getElementById(‘arrow_right’); Here we are doing the same thing as “leftClick”, but we are targeting the element with the id of “arrow_right”.
- var imageViewer = document.getElementById(‘image_1’); Targeting the element with the id of “image_1” which is going to display our images.
We are going to use these variables throughout our JavaScript document. This is going to save us a lot of writing, because we can simple plug in these variables where we need them. Next we see a function called “createLinkedImage”. As we iterate through the array we are going to create new links to those images. The way the links are generated is by what we are passing into this function. This function takes in “domContainer” which is where we want the images to be displayed and we saved that information to the variable “imageViewer”. Also we have to pass in where we get the image information, which is inside our “imageArray”. The last argument we pass into this function is the “index”, which is going to be the index number. The index number is going to determine what image in the array will appear. This function gets called inside the “runSlideshow” function.
The “runSlideshow” function is going to get called as soon as the body of our html page is loaded. If a person does not click on either the left or right arrows our “setInterval” function is going to run. Inside this function we have a conditional statement. That statement says if the index number is greater than the amount of elements in the array we are going to reset the index back to zero. If the index number is less than the amount of elements in the array we will show that image and add one to the index number.
There are two click events that will handle if a person clicks on the left or right arrows. We are always updating the index_num variable in the “setInterval” function and we use that same variable in our two click events. If a person clicks on the right arrow while on the first object in the array we will show that image by calling the “createLinkedImage” function then add one to the index_num variable. If a person clicks left we will subtract one.
She learns to code in Brooklyn 