This time I will share jQuery Plugin and tutorial about Simple jQuery Infinite Carousel Plugin – lbSlider, hope it will help you in programming stack.
| File Size: | 4.78 KB |
|---|---|
| Views Total: | 35418 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<script src="http://code.jquery.com/jquery-latest.min.js"></script> |
2 |
<script src="jquery.lbslider.js"></script> |
2. Create the html for a infinite carousel using Html unordered list.
01 |
<div class="slider"> |
02 |
<ul> |
03 |
<li> Your Content 1 </li> |
04 |
<li> Your Content 2 </li> |
05 |
<li> Your Content 3 </li> |
06 |
<li> Your Content 4 </li> |
07 |
<li> Your Content 5 </li> |
08 |
... |
09 |
</ul> |
10 |
</div> |
3. Create the html for the next/previous buttons.
1 |
<a href="#" class="slider-arrow sa-left"><</a> |
2 |
<a href="#" class="slider-arrow sa-right">></a> |
4. Put styles in your CSS and change it to your taste.
01 |
.slider { |
02 |
position: relative; |
03 |
width: 450px; |
04 |
margin: auto; |
05 |
} |
06 |
ul { |
07 |
margin: 0; |
08 |
padding: 0; |
09 |
} |
10 |
ul li { |
11 |
list-style: none; |
12 |
text-align: center; |
13 |
} |
14 |
ul li span { |
15 |
display: inline-block; |
16 |
vertical-align: middle; |
17 |
width: 100px; |
18 |
height: 100px; |
19 |
background: black; |
20 |
} |
21 |
.slider-arrow { |
22 |
position: absolute; |
23 |
top: 40px; |
24 |
width: 20px; |
25 |
height: 20px; |
26 |
background: black; |
27 |
color: #fff; |
28 |
text-align: center; |
29 |
text-decoration: none; |
30 |
border-radius: 50%; |
31 |
} |
32 |
.sa-left { |
33 |
left: 10px; |
34 |
} |
35 |
.sa-right { |
36 |
right: 10px; |
37 |
} |
5. Call the plugin with options.
1 |
<script> |
2 |
jQuery('.slider').lbSlider({ |
3 |
leftBtn: '.sa-left', // left button selector |
4 |
rightBtn: '.sa-right', // right button selector |
5 |
visible: 3, // visible elements quantity |
6 |
autoPlay: true, // autoscroll |
7 |
autoPlayDelay: 10 // delay of autoscroll in seconds |
8 |
}); |
9 |
</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.
source : jqueryscript.net
