1. INCLUDE JS AND CSS FILES
<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"/>
2. 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>
3. CSS
/* How to set width and hight in non-responsive istances */
#foo .slideme {
width: 550px;
height: 430px;
}
4. JAVASCRIPT
$(document).ready(function() {
$('#foo').slideme();
});
5. OPTIONS
arrows: Create Next and previous button
Default: false
Values: true/false
autoslide: Auto slideshow mode
Default: false
Values: true/false
autoslideHoverStop: Pause auto slideshow mode on mouseover
Default: false
Values: true/false
css3: Css3 animation support
Default: false
Values: true/false
interval: The interval between each slide
Default: 500
Values: Interval in millisecond
itemsForSlide: wrap each 'n' item
Default: undefined
Values: any integer
labels: Label for next/prev control
Default: 'next/prev'
Values: Any string
loop: Infinite slideshow
Default: false
Values: true/false
onCreatedCallback: Call a function after an istance has been created
Default: undefined
Values: Any function
Return: { Object : { "instance": selector, "index": integer } }
onEndCallback: Call a function after an istance animation
Default: undefined
Values: Any function
Return: { Object : { "instance": selector, "index": integer } }
onStartCallback: Call a function before an istance animation
Default: undefined
Values: Any function
Return: { Object : { "instance": selector, "index": integer } }
pagination: Pagination settings
Default: undefined
Values: 'both/numbers/thumbs'
resizable: Create responsive slideshows
Default: undefined
Values: Any integer
speed: Animation speed in millisecond
Default: 500
Values: Any integer
thumbs: Set the thumbnails size
Default: 50/40
Values: Any integer
transition: Set the animation kind
Default: slide
Values: 'fade/slide/page'
6. METHODS
current: Current slide's index
destroy: Destroy target instance
jumpTo: Go to 'n' slide without animation
Values: integer
play: Restart instance's autoslide
playTo: Go to "n" slide with animation
Values: integer
playToId: Goto the selector with animation
stop: Stop instance's autoslide
update: Recount slides
version: Version of slideme
Sample code:
$('#foo').slideme('jumpTo', 3);
JS Tutorial
