Make a Simple JavaScript Slideshow without jQuery

"I just want to make a simple JavaScript slideshow without jQuery."

The slideshow --- also known as the image carousel, the slider, or the rotating banner --- is a commonly requested tutorial among people who are learning JavaScript.

In this tutorial, we'll cover the following topics:

• make a basic slideshow without any external libraries like jQuery
• understand UX and accessibility issues, including whether you should
  use a slideshow at all
• add controls to your slideshow.

The main benefits of not using a library for your slideshow are that your page performs better --- due to less code --- and you can use the slideshow anywhere without worrying about loading any extra files.

This tutorial assumes you know some JavaScript, including functions, click events, and style changes. For anyone who'd find it helpful, I've written a quick roadmap of which things to learn to do practical things with JavaScript as soon as possible.

Make a Basic Slideshow

The HTML

For the HTML, we'll need a container for the slides, and the slides themselves. Here's how that will look:

<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>

The CSS

The core CSS will need to accomplish these things:

• define a container for the slides
• position the slides on top of each other in their container
• define what a slide should look like when it's showing or hiding
• transition the opacity for a fade effect.

Before looking at the CSS, remember you might need to change the class and id names to avoid conflicts in your own sites. The names in this article were picked to be short and readable.

Here's how the core CSS will look:

/*
essential styles:
these make the slideshow work
*/

#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}

Now, you can add other styles to change how the slideshow looks. I used the following for this demo:

/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
}

.slide:nth-of-type(1) {
    background: red;
}
.slide:nth-of-type(2) {
    background: orange;
}
.slide:nth-of-type(3) {
    background: green;
}
.slide:nth-of-type(4) {
    background: blue;
}
.slide:nth-of-type(5) {
    background: purple;
}

The JavaScript

The JavaScript has one job: hide the current slide and show the next one. To accomplish this, we just have to change the classes of the slides in question.

Here's how the JavaScript will look:

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

Let's break down what's happening here.

1. First, we're using querySelectorAll to get the slides from our
   container.
2. Next, we're setting a variable to keep track of the current slide.
3. Then we're creating an interval to show the next slide every two
   seconds (expressed as 2000 ms).

Let's take a deeper look at what's happening inside the nextSlide function:

• First, we change the current slide's class so it's not showing. The CSS transition handles the fade out automatically.
• Then we add one to the current slide, but we use the % operator to cycle back to zero if we've reached the end of the slides. As a quick reminder, the % operator divides two numbers and spits out the remainder. This is great for cases where you have to do math with cycles like a clock or a calendar. In this case, we have 5 slides, so here's what happens with each number: 1%5=1, 2%5=2, 3%5=3, 4%5=4, and 5%5=0.
• Once we have the new slide's number, we change that slide's class so that the slide is showing. Once again, our CSS opacity transition handles the fade effect automatically.

Congrats! Now you have a basic slideshow.

The post Make a Simple JavaScript Slideshow without jQuery appeared first on SitePoint.