🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Just another jQuery carousel plugin used for displaying a list of images in a responsive, full-width, scrollable carousel interface with navigation arrows and bottom scrollbar.

Carousel Image-Slider

Documentation

Light carousel

Light-weight Amazon-like carousel based on jQuery!

Demo:

https://c1one-38.github.io/light-carousel/

How to install:

Using npm:

npm install light-carousel 

Usage example:

Easy as:

var lc = new LightCarousel($('#carousel')); lc.setup();

Example html markup:

<head> 	...  	<!-- Add lib style to your page --> 	<link rel="stylesheet" type="text/css" href="css/styles.css">  	... </head>  <body> ...  	<div id="carousel" class="lc-wrapper"> 		<ul class="lc-carousel"> 			<!-- Here goes your items --> 			<li class="lc-carousel-item"></li> 		</ul>  		<!-- Controll buttons --> 		<a href="#" class="lc-arrow-left lc-arrow"> < </a> 		<a href="#" class="lc-arrow-right lc-arrow"> > </a>  		<!-- Scrollbar --> 		<span class="lc-scrollbar"> 			<span class="lc-scrollbar-track"> 				<span class="lc-scrollbar-thumb"></span> 			</span> 		</span> 	</div>  ... </body>

Options:

Feel free to pass your own selectors for carousel elements or animation speed as second argument. Below you see default values:

defaultOptions = { 	animationSpeed: 500, 	selectors: { 		collectionWrapper: 'ul', 		leftBtn: '.lc-arrow-left', 		rightBtn: '.lc-arrow-right', 		scrollbarTrack: '.lc-scrollbar-track' 	} }  new LightCarousel($('#carousel'), defaultOptions);

Destroy:

lc.destroy();

You May Also Like