Background Slideshow With Ken Burns Effect - jQuery subtle-slideshow.js

subtle-slideshow.js is a jQuery plugin used for generating a responsive fullscreen slideshow from background images. With Ken Burns effects (subtle image zoom & pan effects) based on CSS3 transforms and animations.

See also:

• Creating Image Ken Burns Effect With jQuery And CSS3 - kenburned
• jQuery Extension To Add Ken Burns Effect To Bootstrap Carousel
• Simple jQuery Image Slideshow with Ken Burns Effect
• Pure CSS Slideshow With Ken Burns Effect
• Pure CSS Background Slideshow With Ken Burns Effect

How to use it:

1. Insert jQuery JavaScript library together with the stylesheet subtle-slideshow.css and JavaScript subtle-slideshow.js into the html file.

<link rel="stylesheet" href="subtle-slideshow.css" />
<script src="jquery.min.js"></script>
<script src="jquery.subtle-slideshow.js"></script>

2. Add background images to the a based slides and specify the animation type you want to use. All possible animation types:

• out
• in
• down
• up
• right
• left

<div id="slides">
  <a class="slide" title="Image 1" href="#">
    <span class="animate down" style="background-image: url(1.jpg)"></span>
  </a>
  <a class="slide" title="Image 2" href="#">
    <span class="animate in" style="background-image: url(2.jpg)"></span>
  </a>
  <a class="slide" title="Image 3" href="#">
    <span class="animate out" style="background-image: url(3.jpg)"></span>
  </a>
  ...
</div>

3. Call the main function slideshow on the top container.

$(function(){
  $('#slides').slideshow();
});

4. Customize the duration of the animation.

$('#slides').slideshow({
  slideDuration: 6000,
  fadeDuration: 1000
});

5. Determine whether or not to randomize the play order of the slides.

$('#slides').slideshow({
  randomize: true
});

6. Enable/disable the CSS animations.

$('#slides').slideshow({
  animate: true
});

7. Determine whether or not to pause the slideshow when lost focus.

$('#slides').slideshow({
  pauseOnTabBlur: true
});

8. Default CSS selectors.

$('#slides').slideshow({
  slideElementClass: 'slide',
  slideshowId: 'slideshow'
});

---

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