$.ansSlider

jQuery plugin to create sliders of everything

Latest changes:

Another jQuery plugin to make sliders?

Yes. Amazing, isn't? But the difference between ansSlider and the rest of jquery slider plugins is its configuration options.

Usage:

To init the plugin, use the function "ansSlider", the settings are optional:

$(document).ready(function () {
	$('.gallery').ansSlider();

	//Using options:
	$('.gallery').ansSlider({
		duration: 2000,
		easing: 'linear'
	});
});

The html structure can be anything. The children of the element will be converted to slide.

Configuration

ansSlider is focused to provide a easy way to customice and control your sliders. This is the available options:

width (string)
The width of the element. By default is 100%.
scroll (bool)
Horizontal scroll? By default is false
duration (number/string)
The duration of the transition between two slides. You can use a number for miliseconds or the strings "slow", "normal" or "fast". By default is 1000.
offset (number)
By default, the current slider position is 0 pixels from the container border. You can move the sliders tray to right (positive numbers) or left (negative numbers).
easing (string)
The easing transition. jQuery provides two basic easings: "linear" and "swing", but you can get more by jQuery UI. By default is "swing".
interval(number)
The time interval in miliseconds between slider changes when it's playing. By default is 5000
buttons(string/html element/jquery object)
The elements used as buttons. The elements must have the attribute "rel" with the interaction data
index(number)
The index of starting slider. By default is 0
delay(number)
Time in miliseconds to wait before change to the new slider. It's useful if you want wait to execute some efect before change
beforeChangeSlide(fn)
Function you want execute before each slider change
changeSlide(fn)
Function to execute after each slider change
beforeLoadSlide(fn)
Function you want execute before load a new slider via ajax
loadSlide(fn)
Function to execute after load a new slider
firstSlide(fn)
Function you want execute after go to the first slide
lastSlide(fn)
Function to execute after go to last slide
beforeLoad(fn)
Function you want execute before load the slider
load(fn)
Function to execute after load the slider

Methods

There are some functions to manage the slider:

//Init the slider with some buttons:
$('#my-slider').ansSlider({
	buttons: '.slider-button'
});

$('#my-slider').ansSlider('play'); //Plays the slider
$('#my-slider').ansSlider('stop'); //Stops the slider
$('#my-slider').ansSlider('goto', 0); //Goes to the first slider
$('#my-slider').ansSlider('goto', '+1'); //Goes to the next slider
$('#my-slider').ansSlider('goto', '-2'); //Goes to two sliders back
$('#my-slider').ansSlider('load', ajax_settings, position); //Loads a new slider and place it in a specific position (last by default)
$('#my-slider').ansSlider('getSlider'); //Returns the current slider
$('#my-slider').ansSlider('getSlider', 12); //Returns the slider number 12
$('#my-slider').ansSlider('currentSliderIs', 'last'); //Returns if the current slider is "last", "first", a number position or an jQuery object.

Buttons example (use the attribute "rel"):

<span class="slider-button" rel="0">Go to the first slider</span>
<button class="slider-button" rel="+1">Go to the next slider</button>
<a href="#" class="slider-button" rel="5">Go to 5º slider</a>

Events

You can define the events in the options (beforeLoad, load, beforeChangeSlide, etc) but you can also define events after init the ansslider using the bind function of jquery and appending "ansSlider" to the event name

	//Init ansslider with lastSlide event defined:
	$('#my-slide').ansSlider({
		lastSlide: function () {
			alert('last slider');
		}
	});

	//Join another callback to lastSlide event:
	$('#my-slide').bind('ansSliderLastSlide', function () {
		alert('I have said: last slider');
	});

Example

Muuuuuuuu!!! I'm a cow
0 1 2 3 4 5 6
+1 -1 
<div class="gallery">
	<img src="http://lorempixum.com/400/200/animals/1" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/2" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/3" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/4" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/5" width="400" alt="">
	<div style="width: 400px">Muuuuuuuu!!! I'm a cow</div>
	<img src="http://lorempixum.com/400/200/animals/6" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/7" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/8" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/9" width="400" alt="">
	<img src="http://lorempixum.com/400/200/animals/10" width="400" alt="">
</div>

<span class="boton" rel="0">0</span>
<span class="boton" rel="1">1</span>
<span class="boton" rel="2">2</span>
<span class="boton" rel="3">3</span>
<span class="boton" rel="4">4</span>
<span class="boton" rel="5">5</span>
<span class="boton" rel="6">6</span>
<br>
<span class="boton" rel="+1">+1</span>
<span class="boton" rel="-1">-1</span>
<br>
<button id="play-slider">Play slider</button>
<button id="stop-slider">Stop slider</button>

<script type="text/javascript">
	$(document).ready(function () {
		$('.gallery').ansSlider({
			'buttons': '.boton',
			'width': '600px',
			'offset': 100
		});
		$('#play-slider').click(function () {
			$('.gallery').ansSlider('play');
		});
		$('#stop-slider').click(function () {
			$('.gallery').ansSlider('stop');
		});
	});
</script>
Fork me on Github