🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Carousel

Documentation

lbSlider

jQuery infinitely scrolling slider plugin. You can use any content, not only images.

Usage

You can use any IDs and Classes in your html. Below is just an example.

Javascript

$('#slider').lbSlider({  leftBtn: '#arrow-left', // left control selector  rightBtn: '#arrow-right', // right control selector  visible: 3, // visible elements quantity  autoPlay: true, // autoscroll flag (default: false)  autoPlayDelay: 5, // delay of autoscroll in seconds (default: 10)  autoPlayDirection: 'left-to-right'  //autoplay direction (left-to-right or right-to-left) });

HTML

UL element is required.

<div class="slider-wrap">  <div id="slider">   <ul>    <li>     content here...    </li>    <li>     content here...    </li>    ...   </ul>  </div>  <a href="javascript://" id="arrow-left">left</a>  <a href="javascript://" id="arrow-right">right</a> </div>

.slider-wrap block is not necessary, but I use it to absolute position arrows. Arrows shouldn't be inside #slider, because it has overflow: hidden property. All slides should have same width for correct displaying.

CSS

You can style arrows and content as you like.

Demo

Demo on JSFiddle


You May Also Like