Simple jQuery Infinite Carousel Plugin - lbSlider

File Size: 4.78 KB
Views Total: 36536
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Infinite Carousel Plugin - lbSlider

lbSlider is a ultra-light (~4kb un-minified) jQuery plugin for creating a infinite slider that rotates items in a carousel-like interface.


  • Super simple, fast, lightweight and easy-to-use.
  • Supports any Html elements, not only images.
  • Scrolls automatically or by using prev/next buttons.

Basic Usage:

1. Load the jQuery library and jQuery lbslider at the bottom of your web page.

<script src=""></script> 
<script src="jquery.lbslider.js"></script> 

2. Create the html for a infinite carousel using Html unordered list.

<div class="slider">
<li> Your Content 1 </li>
<li> Your Content 2 </li>
<li> Your Content 3 </li>
<li> Your Content 4 </li>
<li> Your Content 5 </li>

3. Create the html for the next/previous buttons.

<a href="#" class="slider-arrow sa-left">&lt;</a> 
<a href="#" class="slider-arrow sa-right">&gt;</a>

4. Put styles in your CSS and change it to your taste.

.slider {
position: relative;
width: 450px;
margin: auto;
ul {
margin: 0;
padding: 0;
ul li {
list-style: none;
text-align: center;
ul li span {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: black;
.slider-arrow {
position: absolute;
top: 40px;
width: 20px;
height: 20px;
background: black;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 50%;
.sa-left {
left: 10px;
.sa-right {
right: 10px;

5. Call the plugin with options.

leftBtn: '.sa-left', // left button selector
rightBtn: '.sa-right', // right button selector
visible: 3, // visible elements quantity
autoPlay: true, // autoscroll
autoPlayDelay: 10 // delay of autoscroll in seconds

Change log:


  • auto play default value changed - right-to-left

This awesome jQuery plugin is developed by equinox7. For more Advanced Usages, please check the demo page or visit the official website.