Lightweight Circular Carousel Using Vanilla Javascript

javascript-circular-carousel

Circular Lite Carousel is a circular vanilla JavaScript library that uses the requestAnimationFrame() method to provide a fast and smooth transition effect between slides.

js slider, js carousel, javascript carousel example, vanilla js carousel, simple javascript carousel

  • Carousel using vanilla javascript
  • It is very lightweight and has a size of ~2KB.
  • No dependencies.
  • Compatible with all JavaScript frameworks like Mithril JS, React JS, Angular JS, etc.
  • In jQuery carousels, the animate() function is used, which internally uses setInterval() for animation. This affects the browser’s graphic performance.
  • In lite-carousel, requestAnimationFrame() is used for carousel animation. Optimized for browser drawing time.
  • Improves page load time due to less size.

How to make use of it:

1. Add custom slides and next/previous buttons to the library.

<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>

2. Load the main JavaScript file for the document.

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

3. 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);
});

4. CSS template for circular design.

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;
}

Super Tiny Carousel, javascript circular carousel Plugin/Github


See Demo And Download

Official Website(dineshselvantdm): Click Here

This superior jQuery/javascript plugin is developed by dineshselvantdm. For extra Advanced Usages, please go to the official website.