What is YMslider ?It is a simple dynamic, light-weight (2,2K minified, lighter GZipped) and non-intrusive content slider jQuery plugin, fully CSS customizable (theme support) with respect of accessibility and W3C standard rules (strict xHTML valid) ...
... and actually my very first jQuery Plugin
... [More]
!
Demo page, see YMslider v.1.0.7 in action ! | Download YMslider v.1.0.7 files
How to ?HTML Pattern (ol or ul are both supported) :
Text, images, Flash or whatever
Text, images, Flash or whatever
Text, images, Flash or whatever
Head includes (follow that strict order !) :
Do the magic :
$(function(){ // jQuery native function to check if DOM's ready
$('#whateverYouWant').YMslider(); // There you go !
});
Want to go further ?YMslider optional parameters : init : number (default 1, means that the default displayed panel wil be the first list-item), auto : boolean (default true, means that the animation will start automatically), anim : number (default 1, means that the animation duration is about 1 second), easing : string (default swing, means that the animation can use both the jQuery default swing/linear easing possible values but you can also add the jQuery easing plugin to have more choices), pause : number (default 10, means that the pause duration is about 10 seconds, works only if auto is true), hover : boolean (default true, means that the automatic animation mode will be paused while the mouse cursor will hover an animated item, works only if auto is true), keyboard : boolean (default true, means that the keyboard left/right arrows will control the slider animation), controls : "after"|"before"|false (default after, means that the control links can be inserted after or before the animated items or even not be inserted at all), spacer : string (default " ", means that the spacer between two control links is a space/blank character), title : string (default "Move to the $ID panel $NB/$TOT : $TIT", means that the control links' title attribute value could be whatever you want. $ID will automatically be replaced by the div#id you choosed to type in the HTML pattern, $NB by the index (starts from 1) of the list-item referring to the associated control link, $TOT by the total number of the list-items you wrote in the HTML pattern and $TIT by the value of every list-item title attribute (if not found, $TIT=$NB)) ; there could be any $NB, $ID, $TOT or $TIT you want, top : boolean (default false, means that, if you set it to true, each time the user clicks on a control link or uses the keyboard arrow keys while the window has scrolled more than the YMslider's top offset, it can automatically scroll back to the YMslider's top edge using an URL anchor/hash), start : function (default null, means that you can set up a callback function which will be executed everytime the sliding animation begins), stop : function (default null, means that you can set up a callback function which will be executed everytime the sliding animation ends). $('#whateverYouWant').YMslider({
init:2,
auto:false,
anim:.25,
easing:'linear',
pause:5,
hover:false,
keyboard:false,
controls:'before',
spacer:' | ',
title:'Whatever you want',
top:true,
start:function(){
this; // Refers to $('#whateverYouWant')
alert('Start callback');
},
stop:function(){
this; // Refers to $('#whateverYouWant')
alert('Stop callback');
}
});or do it once and for all
$.fn.YMslider.defaults={
init:2,
auto:false,
anim:.25,
easing:'linear',
pause:5,
hover:false,
keyboard:false,
controls:'before',
spacer:' | ',
title:'Whatever you want',
top:true,
start:function(){alert('Start callback');},
stop:function(){alert('Stop callback');}
};or even for just one parameter
$.fn.YMslider.defaults.keyboard=false;Theming : YMslider comes with a standard CSS core file, four extra CSS theme files and some PNG files you can easily modify to fit your tastes. The script produces this easily themeable kind of template :
1
2
3
4
5
6
Some content
Some content
Some content
Some content
Some content
Some content
v.1.0.7 changelogNew easing parameter, New top parameter, Demo page updated with both new parameters, Major code rewrite : CSS and JS files updated, Default theme now uses CSS sprite, Google Closure Compiler has been used for mifinication, Fully uncompressed and commented file added to the download archive, Bug fixe : ID attribute for main div is no longer needed but recommended. v.1.0.6 changelogNew hover parameter, Demo page updated with the new parameter, Code optimization. v.1.0.5 changelogNew init parameter, New keyboard parameter, Old controlsBefore parameter is now controls (with new options), New spacer parameter, New $TIT option related to the title parameter, New start parameter, New stop parameter, Improved CSS file with theme support, Minified version of each files added, Demo page updated with the new parameters and themes, Bug fixes. Well,I'm french so please forget about my poor english ^^
I hope you enjoyed this little jQuery plugin, I'm waiting for your Twitter feedbacks, tell me if you are using YMslider, if you want/made some improvements or whatever :
http://twitter.com/maxymeumprod [Less]
Copyright
©
2013
Black Duck Software, Inc.
and its contributors, Some Rights Reserved. Unless otherwise marked, this work is licensed under a
Creative Commons Attribution 3.0 Unported License
. Ohloh
®
and the Ohloh logo are trademarks of
Black Duck Software, Inc.
in the United States and/or other jurisdictions. All other trademarks are the property of their respective holders.