Responsive Full-width jQuery Carousel Plugin - Light Carousel
File Size: | 8.28 KB |
---|---|
Views Total: | 3921 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
How to use it:
1. Create a list of images and then insert them together with the navigation & scrollbar markups into a container element like this:
<div class="lc-wrapper" id="carousel"> <ul style="padding: 0;"> <li> <img src="1.jpg" alt="" /> </li> <li> <img src="2.jpg" alt="" /> </li> <li> <img src="3.jpg" alt="" /> </li> ... </ul> <a href="#" class="lc-arrow-left lc-arrow"> < </a> <a href="#" class="lc-arrow-right lc-arrow"> > </a> <span class="scrollbar"> <span class="scrollbar-track"> <span class="scrollbar-thumb"></span> </span> </span> </div>
2. The primary CSS styles for the carousel.
.lc-wrapper { overflow: hidden; position: relative; min-height: 220px; white-space: nowrap; /*width: 500px;*/ width: 100%; } .lc-list { list-style-type: none; position: relative; display: inline-block; padding: 0; } .lc-list-item { display: inline-block; min-width: 145px; max-width: 270px; min-height: 200px; max-height: 200px; margin: 0 10px 0 0; position: relative; } .lc-img { width: auto; height: auto; vertical-align: middle; max-width: 270px; max-height: 200px; }
3. Style and position the navigation arrows.
.lc-arrow { position: absolute; top: 85px; text-decoration: none; color: #000; width: 25px; height: 50px; background-color: #fff; box-shadow: 0 1px 3px #888; border-radius: 3px 0 0 3px; text-align: center; vertical-align: middle; line-height: 50px; } .lc-arrow-left { left: 0; } .lc-arrow-right { right: 0; }
4. Style and position the scrollbar at the bottom of the carousel that enables the user to scroll through the images.
.scrollbar { display: block; position: absolute; height: 6px; bottom: 0; left: 0; width: 100%; user-select: none; -ms-user-select: none; -webkit-user-select: none; font-size: 0; } .scrollbar-track { display: block; background-color: #eee; height: 1px; border-radius: 4px; width: 100%; top: 2px; margin: 0; } .scrollbar-thumb { /*display: none;*/ background-color: #aaa; height: 6px; border-radius: 6px; width: 10%; top: -2px; margin: 0; cursor: pointer; }
5. Place jQuery library and the Light carousel plugin's script at the bottom of the webpage.
<script src='//code.jquery.com/jquery.min.js'></script> <script src="slider.js"></script>
6. Create a new LightCarousel instance and then pass the option object as the second parameter as this:
var options = { collectionWrapperSelector: 'ul', leftBtnSelector: '.lc-arrow-left', rightBtnSelector: '.lc-arrow-right', scrollbarTrackSelector: '.scrollbar-track' } var wrapper = $('#carousel'); var lc = new LightCarousel(wrapper, options);
7. Active the carousel plugin.
lc.setup();
Change log:
2017-09-20
- style update
2017-03-23
- style adding bug fixed
2017-02-21
- arrows style fix
2017-01-20
- JS update.
2017-01-19
- code improvements
2017-01-17
- interface improvements
This awesome jQuery plugin is developed by mikhalev-im. For more Advanced Usages, please check the demo page or visit the official website.