Image Simple Carousel in Vanilla JS

This Vanilla JS code snippet helps you to create a simple image carousel. It comes with the next and previous arrow buttons to slide the carousel images with fading effect. It also supports keyboard arrow keys to navigate the slider’s images.

Moreover, the carousel uses Iconic Framework font icons for the next and previous arrows. You can replace them with any other icon library according to your project’s dependency.

How to Create a Simple Image Carousel in Vanilla JS

First of all, load the Iconic Framework CSS for the icons by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>

Create the HTML structure for the image carousel as follows:

<div class="container">
  <div class="slider">
    <img class="active" src="https://source.unsplash.com/gKk9rpyDryU">
    <img src="https://source.unsplash.com/VFGEhLznjPU">
    <img src="https://source.unsplash.com/InR-EhiO_js">
  </div>
  <nav class="slider-nav">
    <ul>
      <li class="arrow">
        <button class="previous">
          <span>
            <i class="ion-arrow-left-c"></i>
          </span>
        </button>
      </li>
      <li class="arrow">
        <button class="next">
          <span>
            <i class="ion-arrow-right-c"></i>
          </span>
        </button>
      </li>
    </ul>
  </nav>
</div>

Now, style image carousel using the following CSS styles:

* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fef8f9;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 20px 5px;
  color: #3c376f;
  font-size: 2rem;
}

button span {
  position: relative;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.previous:hover span {
  transform: translateX(-10px) scale(1.2);
}

.next:hover span {
  transform: translateX(10px) scale(1.2);
}

.slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.slider-nav li {
  display: flex;
  flex: 2;
  text-align: center;
}

img {
  max-width: 100%;
  display: none;
  box-shadow: 10px 10px 20px 0 rgba(94, 47, 59, 0.2);
}

img.active {
  display: block;
  -webkit-animation: fadeImg 0.8s;
          animation: fadeImg 0.8s;
}

.slider-nav .arrow {
  flex: 0 0 15%;
}

.slider-nav a {
  flex-basis: 100%;
  display: flex;
  align-items: center;
}

.slider-nav span {
  display: block;
  width: 100%;
}

@-webkit-keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Add the following JavaScript function:

const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {
  items[count].classList.remove('active');

  if(count < itemCount - 1) {
    count++;
  } else {
    count = 0;
  }

  items[count].classList.add('active');
  console.log(count);
}

function showPreviousItem() {
  items[count].classList.remove('active');

  if(count > 0) {
    count--;
  } else {
    count = itemCount - 1;
  }

  items[count].classList.add('active');
  console.log(count);
}

function keyPress(e) {
  e = e || window.event;
  
  if (e.keyCode == '37') {
    showPreviousItem();
  } else if (e.keyCode == '39') {
    showNextItem();
  }
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);
document.addEventListener('keydown', keyPress);

That’s all! hopefully, you have successfully created image simple carousel in Vanilla JavaScript. If you have any questions or suggestions, feel free to comment below.