Uberbox is a light-weight, feature packed slideshow plugin built ontop of jquery, created and maintained by Matt Froese
The goal of uberbox is to work out of the box. Just give uberbox an element containing list, and it can manage the rest.
<div id="slideshow">
<ul>
<li><img src="http://lorempixel.com/600/300/sports/Slide-1/" alt="" /></li>
<li><img src="http://lorempixel.com/600/300/sports/Slide-2/" alt="" /></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$( "#slideshow" ).uberbox({ height: "300px" });
});
</script>
Due to the acceptance of any content, uberbox currently requires that a height be passed, or set via CSS. This requirement will be dropped in a future release.
- auto (bool): Auto-advance, or manual
- width: Give uberbox a width in px or %
- height: Give uberbox a width in px or %
- startDelay (ms): Add a start delay to your slideshow
- startSlide: Start on a specific slide or pass "random" as a string for a random start slide
- order: "sequence" or "random"
- speed (ms): How long a slide will display before transitioning,
- transition: Can either be a single transition object, or an array of transition objects which then get applied in sequential order. transition: { fx: "fade", speed: "slow" }
- transition.fx: Can be fade, wipe, slide, random
- transition.speed: Can be fast, slow, medium
- transition.direction: Applies only to wipe and slide transtion types. Can be up, down, left, right
- waitForTransition (bool): 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 previous 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
- pauseOnHover (bool): Uberbox will pause when you hover a slide
- containerElement (Default ul): Change the container element uberbox will look for
- slideElement (Default li): Change the item element for each slide item
- pagerItemElement (Default li): Change the item element for each pager item
- thumberItemElement (Default li): Change the item element for each thumb item
- source: Give uberbox a json url and it will fetch the slides dynamically source: { url: "/path/to/json" }
- source.url: The url to use for fetching data
- touchTransitionDelta (Default 0.4): The percentage of distance the finger has to travel relative to the slide width to trigger the transition.
Methods are called by passing the method name to uberbox. Example:
$("#slideshow").uberbox("next");
Trigger next slide
Trigger previous slide
Trigger a specific slide by passing in the slide number:
$("#slideshow").uberbox("to", 2);
Start playing
Pause slide transitions
Toggle slide transitions
Pass any of these along with initialization to attach custom code to each method. Example:
$( "#slideshow" ).uberbox({
onTransitionComplete: function( uberbox, activeSlide ) {
console.log( "I've made the transition!")
}
});
Will be triggerd when uberbox is switched to a specific slide.
When the next slide is triggered.
When the next previous slide is triggered.
When the next slide is triggered
When current transition has completed
Called when play is triggered
Called when pause is triggered
Before setup of uberbox has started. This is before any css gets applied, or the source is loaded.
Just before initalization. Intilization will setup the pager, thumber and set the first slide.
After initialization.
After pause on hover has been set.
When the transition timer gets set, happens every slide transition or when pausing/playing.
When the transition timer gets set, happens every slide transition or when pausing/playing.
Special thanks to Bryan Paterson for contributing to this project.