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
orscroll
). 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
No comments:
Post a Comment