Light-weight Amazon-like carousel based on jQuery!
https://mikhalev-im.github.io/light-carousel/
Using npm:
npm install light-carousel
Easy as:
var lc = new LightCarousel($('#carousel'));
lc.setup();<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>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);lc.destroy();