Author: | dineshselvantdm |
---|---|
Views Total: | 1,360 views |
Official Page: | Go to website |
Last Update: | January 6, 2017 |
License: | MIT |
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; }
How would you modify this to accommodate multiple carousels on the same page?
Nevermind, I solved the issue myself by creating separate “prev” and “next” click functions for each slideshow and assigning custom variables to each. It works well and is a simple solution for someone as green as I am to Javascript. Just make sure you update the HTML div tags and create the additional CSS per carousel.
Example:
//For Left-2 Click action:-
document.getElementById(‘prev-2’).addEventListener(“click”, function() {
var delay = 500; //Animation slide time in milliseconds
var ul_selector = ‘#lite-carousel-2 ul’; //Pass the ul selector as input
var position = ‘Left’;
CircularCarousel.shiftCarousel(position, ul_selector, delay);
});
//For Right-2 Click action:-
document.getElementById(‘next-2’).addEventListener(“click”, function() {
var delay = 500; //Animation slide time in milliseconds
var ul_selector = ‘#lite-carousel-2 ul’; //Pass the ul selector as input
var position = ‘Right’;
CircularCarousel.shiftCarousel(position, ul_selector, delay);
});