Building image carousel using vanilla javaScript
Tags: javascript, html, css, carousel
Published: 2020-12-02 12:37:40

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
```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
```javascript
//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
```javascript
//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 |

```javascript
//function1
function displayImage() {
  for (let j = 0; j < carouselImages.length; j++) {
    carouselImages[j].style.display = "none";
  }
  carouselImages[currentIndex].style.display = "block";
}
```
```javascript
//function2
function displayDot() {
  for (let j = 0; j < dotNode.length; j++) {
    dotNode[j].style.color = "grey";
  }
  dotNode[currentIndex].style.color = "black";
}
```
```javascript
//function3
function moveLeft() {
  if (currentIndex == 0) {
    currentIndex = carouselImages.length - 1;
  } else {
    currentIndex--;
  }
  
  displayImage();
  displayDot();
}
```
```javascript
//function4
function moveRight() {
  if (currentIndex == carouselImages.length - 1) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }
  
  displayImage();
  displayDot();
}
```
```javascript
//function5
function dotClick(c) {
  currentIndex = c;
  displayImage();
  displayDot();
}
```

###d. Set initial values
set the initial values when page loads.
```javascript
//initial stage
displayImage();
displayDot();
```

That's it! Our image carousel is ready. Feel free to give me any kind of feedback.
***
###Complete Code
{% codepen https://codepen.io/mynamejs97/pen/ZEpbBEq %}