Building image carousel using vanilla javaScript

Arshit — Wed, 02 Dec 2020 12:37:40 +0000

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">&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>

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 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";
}

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

DEV Community: Arshit

Building image carousel using vanilla javaScript

1. Write Basic HTML

2. Style it with few CSS

3. Finally put our javascript in it.

a. Grab all the `img` and `li` tags from HTML

b. Create dots/circle

c. It's time to write functions

d. Set initial values

Complete Code

DEV Community: Arshit

Building image carousel using vanilla javaScript

1. Write Basic HTML

2. Style it with few CSS

3. Finally put our javascript in it.

a. Grab all the img and li tags from HTML

b. Create dots/circle

c. It's time to write functions

d. Set initial values

Complete Code

a. Grab all the `img` and `li` tags from HTML