Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

readme.md

Yo Fading Slideshow

Version .03 | By Chris Johnson | https://github.com/ChrisLTD/yo_fading_slideshow

Yo Fading Slideshow is a jQuery plugin that uses just two elements on the page and swaps css background-images. It includes next and previous buttons and pill/dot navigation.

Animated Example

Usage Examples

Simple example

<div id="slideshow"></div>

<div class="slide_data" style="display: none;">
  <div data-src="img/yourImage01.jpg">Caption 1</div>
  <div data-src="img/yourImage02.jpg">Caption 2</div>
</div>

<!-- Include JQuery Core above this line -->
<script src="jquery.yofadingslideshow.js"></script>
<script>
$(".slide_data").YoFadingSlideshow();
</script>

Options

'childObject'             : 'div',          // Target object
'slideshowTarget'         : '#slideshow',   // Object to create the slideshow inside of
'shouldAutoAdvance'       : true,           // Should the slideshow auto advance
'autoAdvanceDelay'        : 3000,           // How much time in milliseconds between slides
'startAutoAdvanceDelay'   : 3000,           // How much time in milliseconds before auto-advancing starts
'includeNextPrevious'     : true,           // Display next and previous buttons
'includePills'            : true,           // Display pills navigation
'includeCaptions'         : true,           // Display captions
'pauseOnHover'            : false,          // Pause auto advance on hover
'fadeSpeed'               : 200,            // Speed of fade in miliseconds
'captionAnimationSpeed'   : 200,            // Value for caption animations
'nextText'                : 'Next',         // Text inside of the next link
'previousText'            : 'Previous',     // Text inside of the previous link
'preloadNextImage'        : true,           // Preload possible next image into hidden div
'touchEnabled'            : false,          // enabled the ability to swipe back and forth for navigation, jQuery mobile required
'randomizeSlides'         : false,          // randomize the order of the slides
'initCallback'            : function() {},  // Called if plugin initialized on an object
'beforeSlid'              : function() {},  // Called before the image has changed
'afterSlid'               : function() {}   // Called after the image has changed

Todo

  • Add option to disable the functionality that makes the user wait for the animation to finish before they can start another one

About

Yo Fading Slideshow is a jQuery plugin that uses just two elements on the page and swaps css background-images.

Resources

Releases

No releases published
You can’t perform that action at this time.