jQuery Slideshow

Download   Demo

jQuery Slideshow is a performant and developer friendlyimage slideshow and content carousel plugin with support for touch gestures. 2KB when gzipped.

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.

jQuery Slideshow