Simple Yet Customizable jQuery Slideshow Plugin - Uberbox

Uberbox is a lightweight yet feather rich jQuery plugin for easily and quickly creating a slideshow with transition animations and lots of configurable options.

Basic Usage:

1. Create a slideshow using ul and li elements.

<div id="slideshow">
<ul>
<li data-thumb="thumb1.jpg"><img src="1.jpg" alt="" /></li>
<li data-thumb="thumb2.jpg"><img src="1.jpg" alt="" /></li>
<li data-thumb="thumb3.jpg"><img src="1.jpg" alt="" /></li>
...
</ul>
</div>

2. Include jQuery javascript library and jQuery uberbox plugin at the bottom of your page.

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.uberbox.js" type="text/javascript"></script>

3. Call the plugin with default options.

<script type="text/javascript">
$(document).ready(function() {
$( "#slideshow" ).uberbox();
});
</script>

4. All the available options and methods.

<script type="text/javascript">
$(document).ready(function() {
$( "#slideshow" ).uberbox({
width: 0,
height: 0,
startDelay: 0,
startSlide: 0, // Start on a specific slide or pass "random" as a string for a random start slide
order: "sequence", // or random
speed: 5000, // How long a slide will display before transitioning,
transition: {
    fx: "fade",
    speed: "slow"
},
waitForTransition: false, // If a slide change is triggered during a transition use this to determine if uberbox should wait for the current transition to complete
nextButton: "", // Give an element to use as a next button
previousButton: "", // Give an element to use as a prev button
playPauseButton: "", //  Give an element to use as a play/pause button
pager: "", // Give a list element to use as a pager
thumber: "", // Give a list element to display thumbnails. You can specify thumbnails by adding data-thumb to each slide li
auto: true, // auto start sliding on page load
pauseOnHover: false,
containerElement: "ul",
slideElement: "li",
pagerItemElement: "li",
thumberItemElement: "li",
source: {
    url: "" // Give uberbox a json url and it will fetch the slides dynamically
},
touchTransitionDelta: 0.4, // percentage of total slide
onTo: function( uberbox ) {},
onNext: function( uberbox ) {},
onPrevious: function( uberbox ) {},
onTransition: function( uberbox, activeSlide, nextSlide ) {},
onTransitionComplete: function( uberbox, activeSlide ) {},
onPlay: function( uberbox ) {},
onPause: function( uberbox ) {},
onSetup: function( uberbox ) {},
onInit: function( uberbox ) {},
onInitComplete: function( uberbox ) {},
onInitEvents: function( uberbox ) {},
onStartTimer: function( uberbox ) {},
onClearTimer: function( uberbox ) {},
onTouchStart: function( uberbox ) {},
onTouchMove: function( uberbox ) {},
onTouchEnd: function( uberbox ) {}
});
});
</script>

---

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