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'
});
下载代码说明
X关闭

jquery desoslide幻灯片插件特效源码

jquery desoslide幻灯片插件是一款强大的jQuery幻灯片插件，支持键盘操作幻灯播放，每个图像支持标题和链接，支持一个页面多个幻灯片切换。且幻灯图片切换过度效果自然，源码兼容性好。是一款非常优秀的幻灯片插件。