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;">
    <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.