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.

Features:

• 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="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.lbslider.js"></script> 

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

<div class="slider">
<ul>
<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>
...
</ul>
</div>

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.

<script>
jQuery('.slider').lbSlider({
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
});
</script>

Change log:

2015-11-27

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