Creating a simple carousel using JavaScript

Hi Developers, In this post, I'm going to show you how to create a simple carousel using Vanilla JavaScript.

It'll be like this,

It's live on Github. Check it out here.

HTML

<main>
  <button id="prev">&lt;</button>
  <div class="card-container"></div>
  <button id="next">&gt;</button>
</main>

HTML is really simple here. We've got a main. Inside main, we've got three elements. One is the actual container card-container that is going to hold cards and the other two are buttons, #next and #prev.

Card Container

As I said, cards will be inside the card container. In my site, I used JavaScript to generate cards using an object.

You can check my code here.

A card looks like this,

<div class="card view">
  <div class="card-image">
    <img src="./designs/todo.png" alt="TODO App">
  </div>
  <a href="https://hariramjp777.github.io/frontend-todo-app/" target="_blank">TODO App</a>
</div>

A card contains a card-image that holds an image and an anchor a for the link.

In a card .view class denotes that it is the current card that is being shown on screen.

Here's my simplified CSS for the card.

.card {
  /* other
     styles */
  opacity: 0;
  pointer-events: none;
}

.card.view { /* when the card contains .view */
  opacity: 1;
  pointer-events: all;
}

The above code block says the card is hidden. It'll be visible only when the class .view is applied.

We've applied .view manually for the first card (as shown above).

That's HTML and CSS. Now we start playing with JavaScript.

JavaScript

First, We're going to select two buttons.

const prev = document.getElementById("prev");
const next = document.getElementById("next");

Concept

Say the user clicks the next button, what we should do?

You guessed it. We have to hide the current card and show the next card. If there's no next card, show the first card.

Same with the prev button, we've to show the previous card. If there's no previous card, show the last card.

In a simpler way,

if prev is clicked
    Find the current card.
    Check if there is a previous card.
    If there, Save the card in a variable called prevCard.
    If not, Save the last card instead.
    Hide the current card i.e. Remove the class ` .view `
    Show the prevCard i.e. Add the class ` .view `

Methods we're going to use in JavaScript

In code, It'll be,

prev.addEventListener("click", function () {
  /* Find the current card */
  const currCard = document.querySelector(".card.view");
  /* Set the prevCard based on its availability */
  const prevCard = currCard.previousElementSibling
      ? currCard.previousElementSibling
      : document.querySelector(".card- 
  container").lastElementChild;
  currCard.classList.remove("view");
  prevCard.classList.add("view");
});

next.addEventListener("click", function () {
  /* Find the current card */
  const currCard = document.querySelector(".card.view");
  /* Set the nextCard based on its availability */
  const nextCard = currCard.nextElementSibling
      ? currCard.nextElementSibling
      : document.querySelector(".card- 
  container").firstElementChild;
  currCard.classList.remove("view");
  nextCard.classList.add("view");
});

In the second step of both code blocks, I mean setting the card that's going to be displayed, I used the ternary operator, which is an abbreviated way of writing if-else statements.

Let's take an example, In this line of code,

const nextCard = currCard.nextElementSibling
    ? currCard.nextElementSibling
    : document.querySelector(".card- 
container").firstElementChild;

currCard.nextElementSibling returns the next element of current card (currCard). If it doesn't find any next element, it returns undefined which is a falsy value in JavaScript.

We're going to use this. If true i.e., we're getting a valid element, set it. Else i.e., we're getting a false value that is undefined, set the first element as the next card.

To get the first element, we can use .firstElementChild.
So, document.querySelector(".card-
container").firstElementChild will return the first child of .card-container.

That's it. We've got a carousel using Vanilla JavaScript.

Feel free the check the live version here.

If you want to check the code, Here's my repository.