jQuery Plugin For Pretty Image Slider With Thumbnails - desoSlide

desoSlide is a simple but pretty jQuery plugin for creating fully customizable image slides with thumbnails and smooth transition animations.

Features:

• Lightweight and easy-to-use
• Highly customizable through CSS and many options
• Supports a caption and a link for each image.
• Supports auto-play and keyboard navigation
• Supports multiple instances on one page

How to use it:

1. Include jQuery library and jQuery desoSlide plugin on your web page

<script src="js/jquery/jquery.js"></script>
<script src="js/jquery.desoslide.js"></script>

2. Include required CSS file to style your image slider

<link rel="stylesheet" href="css/jquery.desoslide.css" />

3. Markup html structure

<div id="home_main_image"></div>
<div>
<ul id="home_demo" class="home-thumbs">
<li> <a href="1.jpg"><img src="1_thumb.jpg" alt="Alt 1" data-caption="Caption 1" data-href="demo.html"></a> </li>
<li> <a href="2.jpg"><img src="2_thumb.jpg" alt="Alt 2" data-caption="Caption 1" data-href="README.md"></a> </li>
<li> <a href="3.jpg"><img src="3_thumb.jpg" alt="Alt 3" data-caption="Caption 1" data-href="LICENSE.md"></a> </li>
<li> <a href="4.jpg"><img src="4_thumb.jpg" alt="Alt 4" data-caption="Caption 4"></a> </li>
</ul>
</div>

4. Call the plugin with options.

$(function() {
$('#home_demo').desoSlide({
	mainImage: '#home_main_image',
	insertion: 'replace'
});
});

5. All the default options and callbacks.

thumbs:     null,     // An anchors (`<a>`) collection
imageClass: 'img-responsive', // Image class(es)
auto: {
    load:   true,     // Preloading images
    start:  false     // Autostarting slideshow
},
first:      0,// Index of the first image to show
interval:   3000,     // Interval between each images
effect: {
    provider:       'animate',// Effect provider ('animate', 'magic')
    name:   'fade'    // Transition effect ('fade', 'sideFade', 'sideFadeBig', 'flip', 'light', 'roll', 'rotate', 'foolish', 'swash', 'tin', 'puff', 'twister', 'random')
},
overlay:    'always', // How to show overlay ('always', 'hover', 'none')
controls: {
    show:   true,     // Shows the player controls (prev/pause/play/next)
    keys:   false     // Able to control by using the keyboard shortcuts (left/space/right)
},
events: {
    onThumbClick:   null,     // On thumb click
    onImageShow:    null,     // On image show
    onImageShown:   null,     // On image shown
    onImageHide:    null,     // On image hide
    onImageHidden:  null,     // On image hidden
    onImageClick:   null,     // On image click
    onPrev: null,     // On previous
    onPause:null,     // On pause
    onPlay: null,     // On play
    onNext: null,     // On next
    onError:null,     // On error
    onWarning:      null,     // On warning
    onSuccess:      null      // On success
}

Change logs:

v2.1.0 (2016-06-28)

• added thumbEvent property

v2.1.0 (2015-12-21)

• updated dependencies

v2.1.0 (2014-06-30)

• major uodate.

v2.0.0 (2014-05-23)

• major uodate.

v1.3.0 (2014-02-10)

• added animate.css as a dependency (used for transitions), it needs to be loaded separately

v1.2.3 (2013-12-04)

• fixed undefined if no overlay
• added 5 callbacks in the new 'events' option: 'thumbClick', 'prev', 'pause', 'play' and 'next'
• moved 'result' option in 'events.completed'
• added spinner for waiting

v1.2.1 (2013-11-26)

• Add a namespace for data API to avoid conflicts

v1.2.0 (2013-11-25)

• effects: added 'sideFade' and 'sideFadeBig'

v1.1.1 (2013-09-11)

• logging errors: get only the first one in order to avoid cascade errors

---

This awesome jQuery plugin is developed by sylouuu. For more Advanced Usages, please check the demo page or visit the official website.