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 outhere.

HTML

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

HTML is really simple here. We've got amain. Insidemain, we've got three elements. One is the actual containercard-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 mysite, I used JavaScript to generate cards using an object.

You can check my codehere.

A card looks like this,

<divclass="card view"><divclass="card-image"><imgsrc="./designs/todo.png"alt="TODO App"></div><ahref="https://hariramjp777.github.io/frontend-todo-app/"target="_blank">TODO App</a></div>

A card contains acard-image that holds an image and an anchora 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.

constprev=document.getElementById("prev");constnext=document.getElementById("next");

Concept

Say the user clicks thenext 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 theprev 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 */constcurrCard=document.querySelector(".card.view");/* Set the prevCard based on its availability */constprevCard=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 */constcurrCard=document.querySelector(".card.view");/* Set the nextCard based on its availability */constnextCard=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,

constnextCard=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 returnsundefined 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 isundefined, 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 versionhere.

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