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.