jQuery Slider plugin

Image and content slider inspired by jQuery UI source. Require jQuery 1.4.2 or higher

More examples

Options

Property	Type	Default
autoPlay	Boolean	false
easing	String	'easeIn'
focused	Number	0
height	Number	400
interval	Number	2000
orientation	String	'horizontal'
speed	Number	1000
stopOnEnd	Boolean	false
width	Number	600

Events

Event		Description
onStart	function(inst)	Allows you to define your own event when the slider movement begins. The function receives the slider instance as parameter.
onEnd	function(inst)	Allows you to define your own event when the slider movement ends. The function receives the slider instance as parameter.
onFirst	function(inst)	Allows you to define your own event when the slider reaches the first slide. The function receives the slider instance as parameter.
onLast	function(inst)	Allows you to define your own event when the slider reaches the last slide. The function receives the slider instance as parameter.

Methods

Method		Description
attach	.slider("attach")	Attach the slider to a jQuery selection.
first	.slider("first")	Show first slide (image, content or etc).
goto	.slider("goto", index)	Go to specified slide by given index.
last	.slider("last")	Show last slide (image, content or etc).
next	.slider("next")	Show next slide (image, content or etc).
option	.slider("option", options)	Get or set any slider option. If no value is specified, will act as a getter.
play	.slider("play")	Start slideshow.
prev	.slider("prev")	Show previous slide (image, content or etc).
stop	.slider("stop")	Stop currently running slideshow.

HTML

<link type="text/css" rel="stylesheet" href="jquery.slider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="jquery.slider.js"></script>

<div id="slider1" class="slider">
	<div class="slider-box">
		<img src="1.jpg" alt="" class="slider-item" />
		<img src="2.jpg" alt="" class="slider-item" />
		<img src="3.jpg" alt="" class="slider-item" />
	</div>
	<a href="#" class="slider-arrow slider-prev"></a>
	<a href="#" class="slider-arrow slider-next"></a>
</div>

Javascript

<script type="text/javascript">
$(function () {
	$("#slider1").slider({
		speed: 700,
		width: 600,
		height: 400
	});
});
</script>

If you like it, buy me a beer :)

donate anything

donate $10

donate $5

Download

jquery.zinoslider-1.0.1.zip (08/01/2012)
Licensed under MIT and GPL

Author

Dimitar Ivanov - Web Developer
Follow me: Twitter | LinkedIn

Browser support

• Firefox 3+
• Chrome 9+
• IE 7+
• Safari 4+
• Opera 10+

Javascript apps and games