Bootstrap Style Responsive Image Carousel In JavaScript

Preview:

Description:

This is a responsive, lightweight image slider inspired by Bootstrap’s Carousel component. Created using pure (Vanilla JS) and without 3rd dependencies.

How to use it:

1. Add images, descriptions, and controls to the carousel.

<div class="carousel">
  <!-- Image Here -->
  <div class="carousel-inner">
    <div class="item active">
      <div class="container">
        <img src="1.jpg" alt="Image Alt 1">
        <blockquote>Description 1</blockquote>
        <p class="author">Author 1</p>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <img src="2.jpg" alt="Image Alt 2">
        <blockquote>Description 2</blockquote>
        <p class="author">Author 2</p>
      </div>
    </div>
    <div class="item">
      <div class="container">
        <img src="3.jpg" alt="Image Alt 3">
        <blockquote>Description 3</blockquote>
        <p class="author">Author 3</p>
      </div>
    </div>
  </div>
  <!-- Carousel Controls -->
  <div class="carousel-control left">
    <div class="arrow left"></div>
  </div>
  <div class="carousel-control right">
    <div class="arrow right"></div>
  </div>
  <ol class="carousel-indicators">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>
</div>

2. The necessary CSS styles for the carousel.

.carousel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 90px 0;
  text-align: center;
  background-color: #000;
  transform: translate(-50%, -50%);
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner>.item {
  position: relative;
  display: none;
  animation: 0.5s ease-in-out;
}

.carousel-inner>.active,
.carousel-inner>.next {
  display: block;
}

.carousel-inner>.next {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner>.to-left {
  animation-name: left;
}

.carousel-inner>.from-right {
  animation-name: right;
}

.carousel-inner>.to-right {
  animation-name: right;
  animation-direction: reverse;
}

.carousel-inner>.from-left {
  animation-name: left;
  animation-direction: reverse;
}

.container {
  margin: 0 auto;
}

img {
  padding: 10px 20px;
  margin: 30px 90px;
  max-height: 60%;
  max-width: 60%;
}

.author {
  margin: 0;
  opacity: 0.5;
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  cursor: pointer;
}

.carousel-control.right {
  right: 0;
  left: auto;
}

.carousel-control>.arrow {
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNiAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJyb3c8L3RpdGxlPjxwYXRoIGQ9Ik0yNS42IDEwLjk3NGwtOC41MyA4LjYyYTEuMzYgMS4zNiAwIDAgMS0xLjkzNS4wMDMgMS4zODcgMS4zODcgMCAwIDEtLjAwMi0xLjk1bDYuMjAxLTYuMjY4SDEuMzY4QTEuMzc0IDEuMzc0IDAgMCAxIDAgMTBjMC0uNzYyLjYxMy0xLjM4IDEuMzY4LTEuMzhoMTkuOTY2bC02LjItNi4yNjdhMS4zODcgMS4zODcgMCAwIDEgLjAwMS0xLjk1IDEuMzYgMS4zNiAwIDAgMSAxLjkzNi4wMDJsOC41MyA4LjYyMWMuNTMyLjUzOC41MzIgMS40MSAwIDEuOTQ4IiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=") center center no-repeat;
  background-size: 26px 20px;
  opacity: 0.6;
  transform: translateY(-50%);
}

.carousel-control>.arrow:hover {
  opacity: 0.8;
}

.carousel-control>.arrow.left {
  transform: translateY(-50%) rotate(180deg);
}

.carousel-control>.arrow.right {
  right: 50%;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  padding-left: 0;
  margin: 0;
  list-style: none;
  transform: translateX(-50%);
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  cursor: pointer;
  border: 1px solid #FFFFFF;
  border-radius: 10px;
}

.carousel-indicators li.active {
  background-color: #FFFFFF;
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@keyframes left {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}

@keyframes right {
  from {
    left: 100%;
  }
  to {
    left: 0;
  }
}

3. The core JavaScript to activate the carousel.

var items = document.querySelectorAll('.carousel .item');
var dots = document.querySelectorAll('.carousel-indicators li');
var currentItem = 0;
var isEnabled = true;
function changeCurrentItem(n) {
  currentItem = (n + items.length) % items.length;
}
function nextItem(n) {
  hideItem('to-left');
  changeCurrentItem(n + 1);
  showItem('from-right');
}
function previousItem(n) {
  hideItem('to-right');
  changeCurrentItem(n - 1);
  showItem('from-left');
}
function goToItem(n) {
  if (n < currentItem) {
    hideItem('to-right');
    currentItem = n;
    showItem('from-left');
  } else {
    hideItem('to-left');
    currentItem = n;
    showItem('from-right');
  }
}
function hideItem(direction) {
  isEnabled = false;
  items[currentItem].classList.add(direction);
  dots[currentItem].classList.remove('active');
  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('active', direction);
  });
}
function showItem(direction) {
  items[currentItem].classList.add('next', direction);
  dots[currentItem].classList.add('active');
  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('next', direction);
    this.classList.add('active');
    isEnabled = true;
  });
}
document.querySelector('.carousel-control.left').addEventListener('click', function() {
  if (isEnabled) {
    previousItem(currentItem);
  }
});
document.querySelector('.carousel-control.right').addEventListener('click', function() {
  if (isEnabled) {
    nextItem(currentItem);
  }
});
document.querySelector('.carousel-indicators').addEventListener('click', function(e) {
  var target = [].slice.call(e.target.parentNode.children).indexOf(e.target);
  if (target !== currentItem && target < dots.length) {
    goToItem(target);
  }
});