jQuery Plugin For Pretty Image Slider With Thumbnails - desoSlide

jQuery Plugin For Pretty Image Slider With Thumbnails - desoSlide
File Size: 4.8 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.