DEV Community

loading...
Cover image for Building image carousel using vanilla javaScript

Building image carousel using vanilla javaScript

Arshit
JavaScript Enthusiast
Updated on ・3 min read

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 -

  1. Write Basic HTML
  2. Style it with few CSS
  3. 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">&lt;</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">&gt;</h1>
    </div>
  </div>

  <script src="https://use.fontawesome.com/2f5189959d.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Let's see what's going on here -

  • Using for loop we determine the number of images for which we need to create dots and accordingly we created a new li
  • 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 function to it (which we'll define in a moment).
    • Last we give it a unique id.
  • Now we gonna put this new li element inside our ul list.

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";
}
Enter fullscreen mode Exit fullscreen mode
//function2
function displayDot() {
  for (let j = 0; j < dotNode.length; j++) {
    dotNode[j].style.color = "grey";
  }
  dotNode[currentIndex].style.color = "black";
}
Enter fullscreen mode Exit fullscreen mode
//function3
function moveLeft() {
  if (currentIndex == 0) {
    currentIndex = carouselImages.length - 1;
  } else {
    currentIndex--;
  }

  displayImage();
  displayDot();
}
Enter fullscreen mode Exit fullscreen mode
//function4
function moveRight() {
  if (currentIndex == carouselImages.length - 1) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }

  displayImage();
  displayDot();
}
Enter fullscreen mode Exit fullscreen mode
//function5
function dotClick(c) {
  currentIndex = c;
  displayImage();
  displayDot();
}
Enter fullscreen mode Exit fullscreen mode

d. Set initial values

set the initial values when page loads.

//initial stage
displayImage();
displayDot();
Enter fullscreen mode Exit fullscreen mode

That's it! Our image carousel is ready. Feel free to give me any kind of feedback.


Complete Code

Discussion (2)

Collapse
braydentw profile image
Brayden W ⚡️

Great tutorial!

Collapse
jlrxt profile image
Jose Luis Ramos T.

Lo he Guardado para practicar. Gracias.