Hello Everyone!
Today I'm gonna try to simplify image carousel. I tried my best to keep code simple and understandable to even new users. feel free to suggest me changes.
Alright, so we're going to build a simple image carousel using vanilla javascript alone. We do this in 3 step -
- Write Basic HTML
- Style it with few CSS
- Finally put our javascript in it.
1. Write Basic HTML
<body class="flexc">
<div class="carousel-container flexc">
<div class="left-arrow" onclick="moveLeft()">
<h1 class="flexc"><</h1>
</div>
<div class="image-container flexc" style="flex-direction: column;">
<img src="https://source.unsplash.com/random" alt="image" />
<img src="https://source.unsplash.com/featured/?nature" alt="image" />
<img src="https://source.unsplash.com/featured/?cat" alt="image" />
<div>
<ul class="dotList"></ul>
</div>
</div>
<div class="right-arrow" onclick="moveRight()">
<h1 class="flexc">></h1>
</div>
</div>
<script src="https://use.fontawesome.com/2f5189959d.js"></script>
</body>
HTML is pretty self-explanatory. If you still don't understand then take your time and feel free to read it again.
2. Style it with few CSS
I use basic CSS styling to style the page just needed. you can see the full code in codepen link give below.
3. Finally put our javascript in it.
It's important part so we do this in steps-
a. Grab all the img and li tags from HTML
//get all the images and li from HTML
var carouselImages = document.getElementsByTagName("img");
var dotNode = document.getElementsByTagName("li");
var currentIndex = 0;
Here I also declare a variable currentIndex and set its value to 0, which we gonna use further.
b. Create dots/circle
//create dots/circle
for (let i = 0; i < carouselImages.length; i++) {
let newDot = document.createElement("li");
newDot.className = "fa fa-circle";
newDot.setAttribute("onclick", "dotClick(this.id)");
newDot.setAttribute("id", parseInt(i));
let dotContainer = document.querySelector(".dotList");
dotContainer.appendChild(newDot);
}
Let's see what's going on here -
- Using
forloop we determine the number of images for which we need to create dots and accordingly we created a newli -
Now we need to add few HTML attribute to this newly created
li- First we set it's class. This'll give us dot (using fontawesome here, check full code for more detail).
- Then we attach a
functionto it (which we'll define in a moment). - Last we give it a unique id.
Now we gonna put this new
lielement inside ourullist.
c. It's time to write functions
we gonna create 5 functions. Knowing what a function does makes it lot easier to code, below is little summary -
| Functions | Their Work |
|---|---|
| displayImage() | Display the desired image and hide rest |
| displayDot() | Turn the color of respective dot to black and rest to grey |
| moveLeft() | Move the image and dots to left |
| moveRight() | Move the image and dots to right |
| dotClick() | Turn the color of the clicked dot to black and display the image accordingly |
//function1
function displayImage() {
for (let j = 0; j < carouselImages.length; j++) {
carouselImages[j].style.display = "none";
}
carouselImages[currentIndex].style.display = "block";
}
//function2
function displayDot() {
for (let j = 0; j < dotNode.length; j++) {
dotNode[j].style.color = "grey";
}
dotNode[currentIndex].style.color = "black";
}
//function3
function moveLeft() {
if (currentIndex == 0) {
currentIndex = carouselImages.length - 1;
} else {
currentIndex--;
}
displayImage();
displayDot();
}
//function4
function moveRight() {
if (currentIndex == carouselImages.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
displayImage();
displayDot();
}
//function5
function dotClick(c) {
currentIndex = c;
displayImage();
displayDot();
}
d. Set initial values
set the initial values when page loads.
//initial stage
displayImage();
displayDot();
That's it! Our image carousel is ready. Feel free to give me any kind of feedback.
Complete Code
Top comments (2)
Great tutorial!
Lo he Guardado para practicar. Gracias.