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"><</button>
<div class="card-container"></div>
<button id="next">></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
| 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,
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- will return the first child of
container").firstElementChild.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.
Top comments (8)
Thanks for your work. I created something similar (an animated version). You can find it here: codepen.io/joosts/pen/dyKRQZv.
Hi, why write a carousel in Js when you can easily use bootstrap?
I cant really understand the need for this long, cumbersome Js code for carousel.
May you enlighten me, please. Cheers
Hello, bootstrap is not the best solution out there. In fact, there are a lot of very useful carousel libraries out there. Sometimes, it's better to understand the flow, and the best way to do it is to build it yourself.
I do and coding is like Mathematics, there is no one best way of coding ,it depends on you who is coding and your best way and functions you want.
I dnt condemn one coding language for another I just choose which I like best. For those who know how to use bootstrap it has same equal abd more power as that of JavaScript. The down side of JavaScript is if the code is not fired properly your site will remain a mess.
I know what I am asking and I know why I asked and Mr Hari already responded correctly. Thank you
Hi, I dont think so. It depends in what you want do with it and what you preferences of code is.
And thanks Mr Hari already responded and I have checked the code.
Yes, You can use Bootstrap.
I was thinking about creating a carousel using JavaScript. I got this idea using some JavaScript methods (mentioned in the post). I wanted to share this as a blog.
But, Thanks for your comment. Have a nice day.
Ok,Thank you Mr Hari. I understand now. I checked it out already and got the concept.
Exceptional UI's you got. 👏
Cheers. Thank you.