1 Default options



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

Shows the third slide at loading.

Code

$('#slideshow').desoSlide({
    thumbs: $('#slideshow_thumbs li > a'),
    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'
});

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源：站长素材