### 1 Default options

#### Result

#### Choose your effect

Effect provider
Effect name

#### 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.

#### Result

#### Code

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

### 3 Autostarting slideshow

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

#### Result

#### 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.

#### Result

#### 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.

#### Result

#### Code

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