jQuery CSS Slider
A jQuery plugin that gives you hooks to build a slider using CSS transitions and more. Using jQuery & jQuery UI Widgets.
Setup
HTML
Install Dependencies
<script src="js/libs/jquery.1.8.2.min.js" type="text/javascript"></script>
<script src="js/libs/jqueryui.1.9.0.min.js" type="text/javascript"></script>
<script src="jquery-css-slider.min.js" type="text/javascript"></script>
Basic Slider Markup
<div id="slider-wrapper">
<ul id="slider">
<li class="slide red">One</li>
<li class="slide ba">Two</li>
<li class="slide pink">Three</li>
<li class="slide blue">Four</li>
...
</ul>
</div>
Run The Slider With Your Custom Options
See all available options
<script type="text/javascript">
$(function(){
$('#slider').slider();
});
</script>
CSS
See included css file
Options
Basic Options
Name |
Type |
Default |
Description |
auto |
boolean |
true |
If this option is enabled, the slider will transition automaticly based on the interval option |
loop |
boolean |
true |
Slider won't stop at last slide, continues to first |
interval |
integer |
3000 (3 seconds) |
If 'auto' enabled, how long between transitions |
hoverPause |
boolean |
true |
Stop automatic transition if user hovers on buttons, navigation, or slider itself. |
initialSlide |
integer |
0 |
First slide to see. (zero index) |
navigation |
boolean |
true |
Enable slide navigation? Buttons |
nextAndPrev |
boolean |
true |
Enable next and previous buttons? |
Element Class Options
These options are useful if you have multiple slider instances
Name |
Type |
Default |
Description |
sliderClass |
string |
css-slider |
Class to give the slider |
slideClass |
string |
css-slide |
Class to give each slide |
nextClass |
string |
css-next |
Class to give the next button |
prevClass |
string |
css-prev |
Class to give previous button |
activeClass |
string |
css-active |
Class to give the currently visible slide |
disabledClass |
string |
css-disabled |
Class to give disabled button elemenets |
navigationClass |
string |
css-slider-navigation |
Class to give the slider navigation |
navigationItemClass |
string |
css-slider-navigation |
Class to give each slider navigation item |
Events
Name |
Description |
onTransition |
Called after each slide transitioin |