Creating a simple carousel using JavaScript
Tags: beginners, javascript, css, carousel
Published: 2021-03-12 12:07:34

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,

![Carousel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iot2j10byet0b0x5auxa.gif)

It's live on Github. Check it out [here](https://hariramjp777.github.io/frontend-designs/).

### HTML

```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](https://hariramjp777.github.io/frontend-designs/), I used JavaScript to generate cards using an object. 

You can check my code [here](https://github.com/hariramjp777/frontend-designs).

A card looks like this,

```html
<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.

```css
.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.

```js
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


| Methods | Explanation |
| --- | --- |
|` .previousElementSibling ` | returns the previous element.|
|` .nextElementSibling `     | returns the next element. |
|` .firstElementChild `      | returns the first element (child) of a parent.|
|` .lastElementChild `| returns the last element (child) of a parent.|

In code, It'll be,

```js
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");
});
```

```js
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,

```js
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](https://hariramjp777.github.io/frontend-designs/).

If you want to check the code, Here's my [repository](https://github.com/hariramjp777/frontend-designs).