Responsive Full-width jQuery Carousel Plugin - Light Carousel

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

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;">
      <img src="1.jpg" alt="" />
      <img src="2.jpg" alt="" />
      <img src="3.jpg" alt="" />

  <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>

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='//'></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.


Change log:



  • style adding bug fixed


  • arrows style fix


  • JS update.


  • code improvements


  • 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.