Tiny Fast Background Image Slideshow - background-transition

background-transition is a tiny (less than 2kb), dynamic, fullscreen, blazing-fast jQuery background image slideshow plugin for attractive backgrounds.

The plugin dynamically loads backgrounds from an array of images and automatically cycles through these background images with configurable fade in/out transitions.

How to use it:

1. Create a container to place the background slideshow.

<div class="backgroundTransition">
  ... Any Content Here ...
</div>

2. Include the background-transition plugin's files on the page.

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

3. Initialize the plugin and define an object of images for the backgrounds.

$('.backgroundTransition').backgroundTransition({
  backgrounds: [
    // at least 2 images
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' }
  ]
});

4. Add an initial background-image to .backgroundTransition container. This image should match the first image passed into the plugin's 'background' array.

.backgroundTransition {
  background-image: url('1.jpg');
}

5. Customize the transition delay. Default: 10ms.

$('.backgroundTransition').backgroundTransition({
  backgrounds: [
    // at least 2 images
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' }
  ],
  transitionDelay: 5
});

6. Customize the animation speed. Default: 1000ms.

$('.backgroundTransition').backgroundTransition({
  backgrounds: [
    // at least 2 images
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' }
  ],
  animationSpeed: 800
});

---

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