desoSlide

Demo

Some examples to show you the plugin features

1 Default options

This plugin has been designed to work with thumbnails. However, you may hide them with CSS to get a basic slideshow.

Result



Choose your effect

Code

<link rel="stylesheet" href="path/to/animate.min.css">
$('#slideshow').desoSlide({
    thumbs: $('ul.slideshow_thumbs li > a'),
    effect: {
        provider: 'animate',
        name: 'fade'
    }
});

2 With links

Show the third slide at loading, large image shown on mouse over, not click.

Code

$('#slideshow').desoSlide({
    thumbs: $('#slideshow_thumbs li > a'),
    thumbEvent: 'mouseover',
    first: 2
});

3 Autostarting slideshow

The 1-indexed thumb is displayed first, no caption is provided.

Code

$('#slideshow').desoSlide({
    thumbs: $('#slideshow_thumbs li > a'),
    auto: {
        start: true
    },
    first: 1,
    interval: 6000
});

4 Keyboard controls

Controls are hidden but available with your keyboard:

  • Press left to go to the previous slide.
  • Press space to switch between play and pause.
  • Press right to go to the next slide.

Code

$('#slideshow').desoSlide({
    thumbs: $('#slideshow_thumbs li > a'),
    overlay: 'hover',
    controls: {
        show: false,
        keys: true
    }
});

5 Without overlay

As the overlay is hidden, captions are ignored.

Code

$('#slideshow').desoSlide({
    thumbs: $('#slideshow_thumbs li > a'),
    auto: {
        start: true
    },
    overlay: 'none'
});

? More examples?

Make your own slideshow based on all options!