/jQuery-CSS-Slider

A jQuery plugin that gives you hooks to build a slider using CSS transitions and more. Using jQuery & jQuery UI Widgets.

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