jQuery Slider²

Simple

Tested with humen, no monkeys. Download
stable
Download
devel

Light

I think ~5,7k as raw is not too bad. Download
stable
Download
devel

Easy

$('#slider').slider(); Too hard? Download
stable
Download
devel

What is it?

It's now back.

A small and lightweight jQuery-plugin to create simple inline slideshow.

TODO/Changes

1.2.0 ?
What to do?
1.1.0 (22.8.2011)
Random starting slide now possible. It's also
possible to choose slide by clicking progress balls now.
1.0.0 (21.6.2011)
Rewrote the plugin. Much nicer now ;)
0.0.5 (?)
On hover shown controls
Link-support to slides
0.0.4 (15.3.2011)
Fixed problems with Firefox
Events: beforeSlide, afterSlide, onRewind
hoverPause-option to pause when user is hovering selector
0.0.3 (6.3.2011)
Fix next/prev -buttons' animation stacking.
Support for text content.
0.0.2 (4.3.2011)
Fixed problems with IE6-8.
Sliding direction (left/right) can be configured now.
Added scroll buttons.
0.0.1 (20.2.2011)
First release

License

MIT License

No requirements nor special terms.
Send me a hello and link to your project, if you feel like it.

Documentation

Methods and options are documented below.
Slider uses selector's children as slides.
You build the slides with CSS & HTML and we do the rest. ;)

.slider( options )

Description: Initialize and start sliding the elements inside current selector.

Options

 
 
autoplay (boolean)
Default: true. Autoplay slides
showControls (boolean)
Show controls for previous & next
showProgress (boolean)
Show progress with funny dots
hoverPause (boolean)
Pause on hover
wait (integer)
Milliseconds to wait before next frame
fade (integer)
Milliseconds to fade
direction ([left|right])
Default: left. Images will slide to this direction
randomize (boolean)
Default: false. Randomizes starting slide.
rewind (function)
Callback on rewind
slidebefore (function)
Called before slide
slideafter (function)
Called after slide

 

Examples

<head> stuff

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

Example with options

        $('#slider').slider({autoplay: false, randomize: true});

Basic example

        $('#slider').slider();
Tags

Loading tags...
About author
Niko Hujanen
Turku, Finland
Send an email
LinkedIn Profile
GitHub Profile
Follow

Adverts