Image and Text SlideShow In JavaScript

Filed under: javascript

Walter G.

4 minute read

Last time I made a quick tic tac toe clone and today, at the request of a friend, I will make an image/text slideshow widget. We see them all over the webs nowadays. Normally looking something like this.

Previous Next

Image/Text Slideshow

Name: Image/Text Slideshow

Language: JavaScript

Estimated Completion: 1 hour

You hit next and the next image loads, and you press previous and you traverse back one. This is going to be a bit different though. It needs to handle both images and text. And while I'm at it, maybe I'll make it flexible enough to handle anything else we can throw at it, like links and html and videos maybe.

First off I'll start by creating a few variables to hold my content and to keep track of which item we're currently in.


var current = 0;
var items = new Array();

Those should be it. I don't forsee myself needing to use anything else. Next up, I'll need to load the items that will go into the slideshow. I'll create a function that will populate the items array that we just declared.

Because I need to handle both images and text, I'll also store the type of content that I'm pushing into the array as well.


function loadGallery()
{
    var item1 = {type:"text", data:"hello world"};
    var item2 = {type: "image", data:"http://www.thatsoftwaredude.com/images/post/0df8bd94-6744-4411-844c-7f0752df75ba.png"};
    var item3 = {type:"text", data:"goodbye"};
    var item4 = {type:"imgae", data:"http://www.thatsoftwaredude.com/images/post/29ea7168-7dff-4757-87d5-61e5234fd60a.png"};
	
	items.push(item1);
	items.push(item2);
	items.push(item3);
	items.push(item4);
}

The best way I see to keep track of multiple types of content, is to create an object for each item and store the type along with it. So I'm going to populate my items array with a collection of objects. I'm going to call this function on pageload to get the items array ready and set to go.

Next up I'll take care of the next and previous buttons. This is pretty simple and I think I'll only need to increment the current variable or decrement it depending on whether I'm going back or forward. Because I want this to be an infinite scrolling slideshow, I won't worry about disabling any button once the limit is reached. If we get to the end, the next button will simply go to the beginning, and if we're at the beginning, the previous button will go to the last element in the array.


function next()
{
    current++;

    if (current >= items.length)
        current = 0;
            
    loadItem();
}

I added a new function loadItem() into the function, because this is where I want to handle adding the image/text to the slideshow. And I'll do the same for the previous function.


function previous()
{
    current--;
        
        if (current < 0)
            current = images.length -1;
            
        loadItem();
}

Just as I had hoped, it was that easy. current will be the index of the items array that is currently showing in the slideshow, and the loading of the item will pretty much just be grabbing that index out of the array, checking its type, and rendering it accordingly.


function loadItem()
{
	var parent = document.getElementById("content");
	parent.innerHTML = "";
	var item = items[current];

	if (item.type == "text")
	{
		parent.innerHTML = item.data;		
	}

	else
	{
		var img = document.createElement("img");
		img.src = item.data;
		parent.appendChild(img);
	}
}

loadItem will grab the current item from the items array, check its type property, and render it correctly based on that. If I wanted too, I could have it handle links and html as well, which would be pretty useful. But that will be an exercise for another time.

Here is a full working version, so you can see it in action.

previous next

View Full Source


<html>
<head>
<style>
.gallery
{
    width: 50%;
    margin: 0 auto;
    border: solid 1px #aaaaaa;
    border-radius: 7px;
    font-size:70pt;
    text-align:center;
    font-family:Impact;
    height:400px;
    padding-top:30px;
}

.gallery .content
{
	height: 200px;
}

.gallery .button
{
    background-color:#cccccc;
    border: solid 1px #333333;
    border-radius:7px;
    padding: 20px 20px 20px20px;
    cursor:pointer;
    font-size:20pt;
}
</style>
<script type="text/javascript">
var current = 0;
var items = new Array();

function next()
{
  current++;
  if (current >= items.length)
      current = 0;
            
  loadItem();
}

function previous()
{
    current--;
        
    if (current < 0)
        current = images.length -1;
            
    loadItem();
}

function loadGallery()
{
    var item1 = {type:"text", data:"hello world"};
    var item2 = {type: "image", data:"http://www.thatsoftwaredude.com/images/post/0df8bd94-6744-4411-844c-7f0752df75ba.png"};
    var item3 = {type:"text", data:"goodbye"};
    var item4 = {type:"imgae", data:"http://www.thatsoftwaredude.com/images/post/29ea7168-7dff-4757-87d5-61e5234fd60a.png"};
	
    items.push(item1);
    items.push(item2);
    items.push(item3);
    items.push(item4);

    loadItem();
}

function loadItem()
{
    var parent = document.getElementById("content");
    parent.innerHTML = "";
    var item = items[current];

    if (item.type == "text")
    {
        parent.innerHTML = item.data;		
    }

    else
    {
        var img = document.createElement("img");
        img.src = item.data;
        parent.appendChild(img);
    }
}

window.onload = loadGallery;
</script>
</head>

<body>
<div class="gallery">
<div id="content" class="content"></div>
<span class="button" onclick="previous()">previous</span>
<span class="button" onclick="next()">next</span>
</div>
</body>
</html>

Walter Guevara is a Computer Scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.

Last updated on: December 30 2023