Slideme 2!
A powerful jQuery slideshow.
A responsive, css3, compatible (works fine even with IE7), customizable, easy to install, multi-instance, fullscreen, powerful slideshow plug-in for jQuery.
Now with more animations and more mobile settings!
A responsive, css3, compatible (works fine even with IE7), customizable, easy to install, multi-instance, fullscreen, powerful slideshow plug-in for jQuery.
Now with more animations and more mobile settings!
Slideme is a fully customisable slideshow, with many different kinds of transition effects, paginations and callbacks.
Why should you use this slideshow?
Well, Try it and discover all its features!
Setup/: Install Javascript/Css
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slideme-1.19.69.js"></script>
<link rel="stylesheet" href="css/slideme.css" type="text/css" media="all"/>
$(document).ready(function() {
$('#foo').slideme();
});
Setup/: HTML
<!-- Any DOM: ul/ol > li, div, section, etc... -->
<div id="foo">
<ul class="slideme"> <!-- Class "slideme" is mandatatory! -->
<li><img src="img/one.jpg" alt="One"/></li>
<li><img src="img/two.jpg" alt="Two"/></li>
<li><img src="img/three.jpg" alt="Three"/></li>
<li><img src="img/four.jpg" alt="Four"/></li>
</ul>
</div>
Setup/: CSS
/* How to set width and height in non-responsive istances */
#foo .slideme {
width: 550px;
height: 430px;
}
Methods/: destroy$('#foo').slideme('destroy');
\*
Return: Destroy target instance;
*\
Methods/: jumpTo$('#foo').slideme('jumpTo', 3);
\*
Values: integer;
Description: Go to 'n' slide without animation;
*\
Methods/: play$('#foo').slideme('play');
\*
Description: Restart instance's autoslide;
*\
Methods/: playTo$('#foo').slideme('playTo', 3);
\*
Values: integer;
Description: Go to "n" slide with animation;
*\
Methods/: playToId$('#foo').slideme('playToId', '#account');
\*
Default: undefined;
Values: Any selector;
Description: Goto the selector with animation;
*\
Methods/: stop$('#foo').slideme('stop');
\*
Description: Stop instance's autoslide;
*\
Methods/: update$('#foo').slideme('update');
\*
Description: Recount slides;
*\
Options/: arrows$('#foo').slideme({
arrows: false
});
\*
Default: false;
Values: true/false;
Description: Create Next and previous button;
*\
Options/: autoslide$('#foo').slideme({
autoslide: false
});
\*
Default: false;
Values: true/false;
Description: Auto slideshow mode;
*\
Options/: autoslideHoverStop$('#foo').slideme({
autoslideHoverStop: false
});
\*
Default: false;
Values: true/false;
Description: Pause auto slideshow mode on mouseover;
*\
Options/: css3$('#foo').slideme({
css3: true
});
\*
Default: false;
Values: true/false;
Description: Css3 animation support;
*\
Options/: interval$('#foo').slideme({
interval: 1000
});
\*
Default: 500;
Values: Interval in millisecond;
Description: The interval between each slide;
*\
Options/: itemsForSlide$('#foo').slideme({
itemsForSlide: 3
});
\*
Default: undefined;
Values: any integer;
Description: wrap each 'n' item;
*\
Options/: labels$('#foo').slideme({
labels: {
next: 'next',
prev: 'prev'
}
});
\*
Default: 'next/prev';
Values: Any string;
Description: Label for next/prev control;
*\
Options/: loop$('#foo').slideme({
loop: false
});
\*
Default: false;
Values: true/false;
Description: Infinite slideshow;
*\
Options/: nativeTouchScroll$('#foo').slideme({
nativeTouchScroll: false
});
\*
Default: false;
Values: true/false;
Description: Create a native mobile look alike slider.;
*\
Options/: onCreatedCallback$('#foo').slideme({
onCreatedCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function after an istance has been created;
Return: { Object : { "instance": selector, "index": integer } };
*\
Options/: onEndCallback$('#foo').slideme({
onEndCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function after an istance animation;
Return: { Object : { "instance": selector, "index": integer } };
*\
Options/: onStartCallback$('#foo').slideme({
onStartCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function before an istance animation;
Return: { Object : { "instance": selector, "index": integer } };
*\
Options/: pagination$('#foo').slideme({
pagination: 'numbers'
});
\*
Default: undefined;
Values: 'both/numbers/thumbs';
Description: Pagination settings;
*\
Options/: resizable$('#foo').slideme({
resizable: {
width: 320,
height: 280
}
});
\*
Default: undefined;
Values: Any integer;
Description: Create responsive slideshows;
*\
Options/: speed$('#foo').slideme({
speed: 1000
});
\*
Default: 500;
Values: Any integer;
Description: Animation speed in millisecond;
*\
Options/: swipe$('#foo').slideme({
swipe: true
});
\*
Default: true;
Values: true/false;
Description: Enable swipe for touch device.;
*\
Options/: thumbs$('#foo').slideme({
thumbs: {
width: 50,
height: 40
}
});
\*
Default: 50/40;
Values: Any integer;
Description: Set the thumbnails size;
*\
Options/: touch$('#foo').slideme({
touch: true
});
\*
Default: false;
Values: true/false;
Description: Set a native slide for touch device.;
*\
Options/: transition$('#foo').slideme({
transition: 'page'
});
\*
Default: slide;
Values: 'fade/slide/page/zoom';
Description: Set the animation kind;
*\
Ok, maybe it's a bug!
Quality is paramount to us; please let us know about bugs that you might find by filling out the feedback form below.
Thanks!
