Responsive Image Carousel In Vanilla JavaScript

Preview:

Description:

A vanilla JavaScript library to create a fully-responsive, auto-rotating image carousel with custom caption titles and text.

How to use it:

Add images together with image captions and carousel controls to the carousel.

<section id="slider" class="slider">
  <div id="wrapper" class="slides-wrapper">
      <div id="slide" class="slide" data-slide-id="0">
          <img class="slide__img" src="1.jpg" alt="slider-0">
          <div class="slide__caption">
              <span class="slide__caption--title">Slide 1</span>
              <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>
          </div>
      </div>
      <div id="slide" class="slide" data-slide-id="1">
          <img class="slide__img" src="2.jpg" alt="slider-1">
          <div class="slide__caption">
              <span class="slide__caption--title">Slide 2</span>
              <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>
          </div>
      </div>
      <div id="slide" class="slide" data-slide-id="2">
          <img class="slide__img" src="https://images.unsplash.com/photo-1511431426884-c1525fc26c8a?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="slider-2">
          <div class="slide__caption">
              <span class="slide__caption--title">Slide 3</span>
              <span class="slide__caption--text">3.jpg</span>
          </div>
      </div>
      <div id="slide" class="slide" data-slide-id="3">
          <img class="slide__img" src="4.jpg" alt="slider-3">
          <div class="slide__caption">
              <span class="slide__caption--title">Slide 4</span>
              <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>
          </div>
      </div>
  </div>
  <a href="#" class="slider__btn slider__btn--prev" data-slide="prev">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
  </a>
  <a href="#" class="slider__btn slider__btn--next" data-slide="next">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </a>
  <div class="indicators">
      <ul class="indicators__list">
          <li class="indicators__item active" data-slide-to="0"></li>
          <li class="indicators__item" data-slide-to="1"></li>
          <li class="indicators__item" data-slide-to="2"></li>
          <li class="indicators__item" data-slide-to="3"></li>
      </ul>
  </div>
</section>

In this example, you need to load the Font Awesome for the navigation icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Load the compiled JavaScript and CSS files in the document. Done.

<link href="css/main.css" rel="stylesheet">
<script src="js/script-compiled.js"></script>