Deso Thumbnail slider

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
}

Demo     Download

Deso Thumbnail slider

| Angular js, Bower, CSS3, CSS3 Animation, Javascript, jQuery Animation, jQuery Plugins | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.