Super Tiny Carousel In Vanilla JavaScript – Lite Carousel

Preview:

Description:

Lite Carousel is a really light, zero-dependency JavaScript carousel library that uses the requestAnimationFrame() method to provide the fast, smooth transition effect between slides.

How to use it:

Add custom slides and next/prev buttons to the carousel.

<div id="lite-carousel">
  <div id="prev"><</div>
  <div class="viewport">
    <ul>
      <li><img src="1.jpg"><span>Item 1</span></li>
      <li><img src="2.jpg"><span>Item 2</span></li>
      <li><img src="3.jpg"><span>Item 3</span></li>
    </ul>
  </div>
  <div id="next">></div>
</div>

Load the main JavaScript file at the end of the document.

<script src="lite-carousel.min.js"></script>

The main JavaScript to active the carousel.

//For Left Click action:-
document.getElementById('prev').addEventListener("click",function(){
  var delay = 500;  //Animation slide time in milliseconds
  var ul_selector = '#lite-carousel ul';  //Pass the ul selector as input 
  var position = 'Left';
  CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

//For Right Click action:-
document.getElementById('next').addEventListener("click",function(){
  var delay = 500;  //Animation slide time in milliseconds
  var ul_selector = '#lite-carousel ul';  //Pass the ul selector as input 
  var position = 'Right';
  CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

The sample CSS to style the carousel.

img {
  width: 200px;
  height: 100px;
}

span {
  position: absolute;
  top: 39px;
  left: 81px;
}

ul {
  width: 300%;
  position: absolute;
  padding: 0px;
}

div.viewport {
  overflow: hidden;
  width: 203px;
  height: 117px;
  position: relative;
  margin-left: 15px;
}

li {
  list-style: none;
  position: relative;
  float: left;
  margin-left: 3px;
}

div#lite-carousel {
  overflow: hidden;
  position: relative;
  margin-left: 39%;
}

div#prev {
  position: absolute;
  cursor: pointer;
  top: 54px;
  font-weight: bold;
}

div#next {
  position: absolute;
  cursor: pointer;
  left: 226px;
  top: 54px;
  font-weight: bold;
}