Yo Fading Slideshow is a jQuery plugin that uses just two elements on the page and swaps css background-images.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example.gif
example.html
jquery.yofadingslideshow.js
readme.md
yofadingslideshow.css

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