Highly Configurable jQuery Slideshow Plugin - Slideme

Slideme is a simple, responsive and customizable jQuery plugin for creating a slideshow with lots of options and CSS3 animation support.

Features:

• Free, fast and easy.
• Supports any Html DOM, ul/ol > li, div, section, etc...
• Arrows, numbers and buttons navigation.
• Auto slide and loop.
• Multi instances on one page.
• Pause auto slide mode on mouseover.
• CSS3 animations and transitions supported.
• Pagination with thumbnails, numbers, or both.
• Cross browser. Works in IE7/8 and modern browsers.
• Callback events and methods supported.

Basic Usage:

1. Add the required slideme.css in your document.

<link href="slideme.css" rel="stylesheet" type="text/css">

2. Markup Html Structure. Class "slideme" is mandatatory.

<div id="demo">
<ul class="slideme">
<!-- Class "slideme" is mandatatory! -->
<li><img src="http://placehold.it/350x250/000000" alt="One"/></li>
<li><img src="http://placehold.it/350x250/ff0000" alt="Two"/></li>
<li><img src="http://placehold.it/350x250/00cc00" alt="Three"/></li>
<li><img src="http://placehold.it/350x250/0000ff" alt="Four"/></li>
</ul>
</div>

3. Include the latest version of jQuery library and jQuery Slideme plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.slideme-1.19.69.js"></script> 

4. Initialize the slideshow.

<script>
$(document).ready(function() {
$('#demo').slideme();
});
</script>

5. The CSS.

#demo .slideme {
width: 350px;
height: 250px;
}

6. Advanced options.

<script>
$(document).ready(function() {
$('#demo').slideme({
arrows: false, // Create Next and previous button.
autoslide: false, // Auto slideshow mode
autoslideHoverStop: false, // Pause auto slideshow mode on mouseover.
css3: true, // Css3 animations.
interval: 1000, // The interval between each slide.
itemsForSlide: 3, // wrap each 'n' item.
labels: { //  Label for next/prev control;
next: 'next',
prev: 'prev'
},
loop: false, // Infinite slideshow
onCreatedCallback: '', // Call a function after an istance has been created
onEndCallback: '', // Call a function after an istance animation;
onStartCallback: '', // Call a function before an istance animation
pagination: '', // Pagination settings. both, numbers or thumb
resizable: { // Create responsive slideshows
width: '',
height: ''
},
thumbs: { // Set the thumbnails size
width: 50,
height: 40
},
speed: 500, // Animation speed in millisecond;
transition: 'page', // Set the animation kind. fade, slide or page
});
});
</script>

---

This awesome jQuery plugin is developed by luigiferraresi. For more Advanced Usages, please check the demo page or visit the official website.