Slideshow In JavaScript

Ryan Barrera — Sat, 23 Jul 2022 22:12:00 +0000

So, you've finished your website or app, but you notice something is missing... There is nothing that makes your website/ app approachable or interesting. Today, now more than ever the attention span of individuals is getting shorter by the day. Not that they are getting dumber, but there is so much content out there it is easy to get bored or find something different. Creating content on the internet is getting more complex by the day. Different generations are both using the web and its applications causing a wide range of demographics to create content for. But few things still remain the same. For example it is most important that your content is read!

But how do you make sure your content is going to get read!?

You don't want it to be too much that the reader doesn't realize there is more than what catches their eye. SO how do you approach this dilemma?

For starters, I would approach this like a job interview. Yes, being qualified is important, but you need to look the part as well. If you don't "look" prepared, then it will be difficult to look past what you're saying. Not that the information is bad, but it's important to know your audience, atheistically that is.

Often in web development you have a team of individuals working on a single project. Each person focusing on their task to make the web application the best it can be. These developers are using programs such as CSS, JavaScript and HTML and sometimes many other programs. Each program works differently, and when properly executed you have a fully functioning web application.

The best way I can describe the three programs I mentioned previously and how they work together is to look at a car. Any car works for this analogy. In this analogy we are breaking the car into 3 part, our CSS, HTML and JavaScript.

First we're gonna look at the body or frame of the car that is going to be our HTML.

The HTML/Body can look different pending the type of car or website you using. Take the frame of my Honda Accord, and the frame of school bus, in comparison to to the web applications of Amazon.com and Netflix. Both cars drive on the the road they both web apps surf the internet, but they both have a different function (pun intended) and are used differently.

Next is the look of the car, this is from the shell to the paint job.

This isn't vitally important to either running properly, but as we will work on later, the appearance is equally important to everything involved.

Then comes perhaps one of the more vital elements in web development, The JavaScript or in this case the engine.

Without either to website like the car is just something cool to look at. Depending on what the car is going to be doing, engine parts will different pending the type of car. The same is with JavaScript. Depending what the web application will do, depends on what kind of events there will be eventListeners and the list goes one.

This ultimately brings me to my point that I want to make with the web application I have created for myself.

As you can see I have a pretty pain and boring web page. I want to add something to it that makes it easier on the eyes and at the very least adds depth to what I am trying to accomplish with this web application.

My goal is to add a slideshow off all the albums covers that are in my db.json file (there are 9 of them). I want this to be on the centered and I want it to be on a timer. But before I go into JavaScript and implement the code I need to tell JS where to put the code (HTML) and the format I want it to be in (CSS).

In my HTML file inside the

tags I want implement my image tag () for this it is important I give it a "name" and set it to something relevant to what I want it to do. In this case I chose "slide". I placed it towards the bottom of the of the tag because I want this to appear at the bottom of the page.

<img name="slide" class="slidehow-container"/>

I then set the CSS for the image.

  img {
      display: flex;
      width: 400px;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

I say how big I want the slide show to be. You can get fancy here, I chose a more simple route.

Now comes the JavaScript!

First I will set the variables.

let i = 0;
let images = [];
let time = 4000;

We are setting i to zero(0) to show where we want to start.

let images = []; is set to empty array as we will create more files for images that will be in the slideshow.

let time = 4000; time is our timer, JavaScript counts in milliseconds so setting time = 4000 is setting it to 4-seconds.

now we set images to an array and set that array to a link of the image we want a part of the slide show. Note the URLs are contained in strings ''.

images[0] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/Rhcp1.jpg';
    images[1] = 'https://upload.wikimedia.org/wikipedia/en/5/5b/Freakystyleyalbumcover.jpg';
    images[2] = 'https://upload.wikimedia.org/wikipedia/en/a/a2/UpliftMofoCover.jpg';
    images[3] = 'https://upload.wikimedia.org/wikipedia/en/9/98/Mother%27sMilkAlbumcover.jpg';
    images[4] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/RHCP-BSSM.jpg';
    images[5] = 'https://upload.wikimedia.org/wikipedia/en/8/8a/Rhcp7.jpg';
    images[6] = 'https://upload.wikimedia.org/wikipedia/en/d/df/RedHotChiliPeppersCalifornication.jpg';
    images[7] = 'https://upload.wikimedia.org/wikipedia/en/2/23/Rhcp9.jpg';
    images[8] = 'https://upload.wikimedia.org/wikipedia/en/e/e6/Stadiumarcadium.jpg';

Now that we have the images we want in the slide and set the timer variable we need to create a function that will execute the slide show. For this we will need an if & else statement that will make the photos change every 4-seconds and when we get to end of the images, we want the slide show to start all over again.

function slideShow(){
    document.slide.src = images[i];

        if(i < images.length - 1){
           i++;
        } else{
        i = 0
        }

 setTimeout("slideShow()", time);

}

If you're like me, you'll spend too much time on naming a function. I do my best to use the KISS method Keep It Simple Stupid. Be clear and direct so if other coders were to read it, they know what the function should be doing.

let's break this down!

document.slide.src = images[i];

document. is a anchor to the HTML page, .slide goes to the tag in the HTML document, src is a reference to the file in my VS Code. So in short this line of the function is reaching into my HTML file finding the name="slide" and setting it to images[i];. and if you remember the variables we set at the beginning images[i]; = images[0].

Now we set the if & else statements.

if(i < images.length - 1){
           i++;
        } else{
        i = 0
        }

In pseudo code this if statement is saying;
if index of 0 is less than all the images and take away 1 from that. if that is true then we want to increment by 1 (i++). When we reach to last index[i] we want the else statement to reset the index to 0 and start the slideshow all over again.

Now we implement the timer by invoking the function with the time variable to set at the beginning like so;

function slideShow(){
    document.slide.src = images[i];

        if(i < images.length - 1){
           i++;
        } else{
        i = 0
        }

 setTimeout("slideShow()", time);

}

Note; setTimeout("SlideShow"(), time); is still inside the function slideShow()

And lastly we want this function to load when the page loads, So we'll add window.onload = slideShow;. window.onload ensure this function loads after the window has loaded.
All together the JS code looks like;

let i = 0;
let images = [];
let time = 4000;


    images[0] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/Rhcp1.jpg';
    images[1] = 'https://upload.wikimedia.org/wikipedia/en/5/5b/Freakystyleyalbumcover.jpg';
    images[2] = 'https://upload.wikimedia.org/wikipedia/en/a/a2/UpliftMofoCover.jpg';
    images[3] = 'https://upload.wikimedia.org/wikipedia/en/9/98/Mother%27sMilkAlbumcover.jpg';
    images[4] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/RHCP-BSSM.jpg';
    images[5] = 'https://upload.wikimedia.org/wikipedia/en/8/8a/Rhcp7.jpg';
    images[6] = 'https://upload.wikimedia.org/wikipedia/en/d/df/RedHotChiliPeppersCalifornication.jpg';
    images[7] = 'https://upload.wikimedia.org/wikipedia/en/2/23/Rhcp9.jpg';
    images[8] = 'https://upload.wikimedia.org/wikipedia/en/e/e6/Stadiumarcadium.jpg';

function slideShow(){
    document.slide.src = images[i];

        if(i < images.length - 1){
           i++;
        } else{
        i = 0
        }

 setTimeout("slideShow()", time);

}

window.onload = slideShow;

Leaving us with this as the final result.

I know it's not the flashy or super what I was completely looking for. But it's a step in the right direction!

Hope you enjoyed,

Ryan Barrera

DEV Community: Ryan Barrera

Slideshow In JavaScript