devices

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!

Download v2
Go to Documentation Visit "Sheeps and Sleep"!
guide

Setup and Docs

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/: 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/: 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;
*\
report-bugs

It's not a bug, it's a feature!

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!

Report now!