jQuery Slideshow

jQuery Slideshow is a performant, flexible and developer friendly image slideshow and content carousel plugin. 2KB when gzipped. Download.

Change the transition:

Setup

Setup is not restricted to a fixed markup pattern. Theoretically almost any content can be placed within a slide. If you are using images you should always specify the width and height attributes so that layout calculations can be done without waiting for the assets to finish downloading.

<div class="slideshow">
    <ul class="carousel">
        <li class="slide">…</li>
        <li class="slide">…</li>
        <li class="slide">…</li>
    </ul>
</div>

The plugin is instantiated in the usual manner and an instances API can be accessed via element data.

// Create slideshow instances
var $slideshow = $('.slideshow').slides(),

    // Access an instance API
    api = $slideshow.data('slides');

Options

Global options can be specified via the standard jQuery plugin interface or as data attributes on individual slideshow elements. Remember that camelCase options should be written as hyphen-separated attributes, for example the hoverPause option would be defined on the element with the data-hover-pause attribute.

<div class="slideshow"
    data-pagination="true"
    data-loop="false"
    data-transition="crossfade">

Setup

carousel: Selector for the carousel element. Default: ".carousel".
items: Selector for carousel items. Default: ".slide".
slideWidth: Set a fixed width for each slide. Default: false.
jumpQueue: Allow .to() method while animations are queued. Default: true.
offset: Starting slide. Default: 1.

Controls

skip: Render next/previous skip buttons. Default: true.
pagination: Render pagination. Default: true.
auto: Autoplay timeout in milliseconds. Set to a falsy value for no autoplay. Default: 6000.
autostop: Stop autoplay when user manually changes slide. Default: true.
hoverPause: Pause autoplay on hover. Default: false.
loop: Allow slideshow to loop. Default: false.
nextText: Text to display on next skip button. Default: "Next".
previousText: Text to display on previous skip button. Default: "Previous".

Transitions

transition: Specify transition (crossfade or scroll). Default: "scroll".
speed: Animation speed between slides in milliseconds. Default: 600.
easing: Animation easing between slides. Default: "swing".
visible: Approximate number of slides visible (scroll transition only). Default: 1.

Callbacks

onupdate: A callback function to execute on slide change. Default: false.
oncomplete: A callback function to execute on slide transition complete. Default: false.

If callbacks are specified as data attributes they must reference functions within the global (window) namespace.

Public methods

.hasNext(): Are there any slides after current item or can the carousel be scrolled any further (ignores loop). Returns boolean.
.hasPrevious(): Are there any slides previous to current item (ignores loop). Returns boolean.
.next(): Go to the next slide.
.previous(): Go to previous slide.
.to(index): Go to slide. Index Slide position.
.redraw([transition]): Redraw the carousel. Transition New transition style.
.play(): Start autoplay.
.pause(): Pause autoplay.
.stop(): Stop autoplay entirely.