So this next post covers a simple slideshow that uses a combination of CSS and JavaScript. Once again, some degree of knowledge is assumed on CSS and JavaScript. Here we are displaying an image which slides to the left to reveal another image. This happens, in our case, 5 times and then the slideshow slides back to the right to the first image. The 5 slides are each 250 pixels by 250 pixels in size and show for 5 seconds.
You can view a demo Here
Let’s get into the code:
To start with, we’ll take a look at the HTML for the slideshow. It consist of a DIV container (“slideshow”) within which is a another DIV container (“runner”) which will hold all the images. The images are drawn side by side in a line.
<div class="slideshow">
<div id="runner" class="runner">
<img src="images/No1.png">
<img src="images/No2.png">
<img src="images/No3.png">
<img src="images/No4.png">
<img src="images/No5.png">
</div>
</div>
To view only one image at a time, a window the size of one image is created in the parent container as defined in the CSS.
.slideshow{
position: relative;
left: calc(50% - 125px);
width: 250px;
height: 250px;
overflow: hidden;
}
Here we position the slideshow to the centre of the screen using the left attribute. In order to do this we must use positioning which we still want to remain relative to the other items on the page. We also want to restrict the positioning of the child container to be within the parent, allowing us to manipulate the slides to the correct position. The width and height are set to 250 pixels, the same as the physical size of the slides, giving us our viewing window. Because we are going to be sliding the pictures left and right, but only want the one within our window visible, we have to hide the overflow.
The container holding our slides will need to be as wide as the combination size of all our slide (5 slides * 250 pixels), the height to one of our slides, and the position will need to be absolute so we can move the string of slides left and right within the parent.
.runner{
position: absolute;
top: 0;
left: 0;
height: 250px;
width: 1250px;
transition: left 0.5s ease-out;
font-size: 0;
}
We start off at position 0,0 on slide 1. The manipulation of the slides will be done with JavaScript which we’ll get to in a moment, but when the slide moves we want a smooth transition from one slide to the next and we want it to be slow enough to be visible. Any change to the left property of the child container (“runner”) will fire off the transition over 0.5 seconds and it will ease-out rather than move linear. The last declaration is actually a bit of a hack. When drawing the slides next to each other, a small undesirable gap of a couple of pixels is left either side of each slide. This is removed by the assigning of font-size 0. Strange but true.
The rest of the magic is performed by JavaScript:
var x = 0;
var noOfSlides = 5;
function changeImage()
{
document.getElementById("runner").style.left = x.toString() + "px";
x -= 250;
if(x <= (noOfSlides * -250))
x = 0;
t = setTimeout("changeImage()",5000);
}
window.onload = changeImage;
First we need to declare a variable to hold the position of the slides, which we do with “x = 0”. We also have a variable for the number of slides we are going to process “noOfSlides = 5”. Between these two values, we can manipulate the left position of the child container “runner” to align with the slide sized window declared in the parent container “slideshow”. We simply change the left position by 250 pixels each time to reveal the next slide. Because we start at 0 and want the slides to move to the left, we have to use negative numbers, so to move our string of slides left one slide, we simply deduct -250 pixels from it’s left position. This we do 5 times for the 5 slides. If our position counter “x” is equal to 5 slides * -250 pixels (our 5 slide positions), we reset it back to 0. This causes the 5 slides to move to the right in succession and the process starts again. To start the process off, we make a call to the function “changeImage” when the window has fully loaded in the first instance. After that the slideshow becomes self perpetuating.
That’s about all there is to it.
FULL CODE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style>
.slideshow{
position: relative;
left: calc(50% - 125px);
width: 250px;
height: 250px;
overflow: hidden;
}
.runner{
position: absolute;
top: 0;
left: 0;
height: 250px;
width: 1250px;
transition: left 0.5s ease-out;
font-size: 0;
}
</style>
<script>
var x = 0;
var noOfSlides = 5;
function changeImage()
{
document.getElementById("runner").style.left = x.toString() + "px";
x -= 250;
if(x <= (noOfSlides * -250))
x = 0;
t = setTimeout("changeImage()",5000);
}
window.onload = changeImage;
</script>
</head>
<body>
<div class="slideshow">
<div id="runner" class="runner">
<img src="images/No1.png">
<img src="images/No2.png">
<img src="images/No3.png">
<img src="images/No4.png">
<img src="images/No5.png">
</div>
</div>
</body>
</html>