Demo

Zino - jQuery Slider plugin

Image and content slider, banner rotator, slider plugin

  • Cross browser support (Firefox 3+, Chrome 11+, IE8+, Safari 4+, Opera 10+)
  • Full featured and powerful API
  • Slideshow capabilities
  • Highly customizable
  • Horizontal and vertical orientation
  • Multiple sliders on the same page
  • Unobtrusive JavaScript
  • SEO friendly
  • Valid HTML/CSS
  • Semantic HTML
jQuery Slider plugin jQuery Image slider jQuery Content slider jQuery banner rotator jQuery Image slideshow

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>