Minimal Background Slideshow Plugin - jQuery PhotoFlip

PhotoFlip is a tiny jQuery background slideshow plugin to create a smooth and configurable slideshow by seamlessly transitioning between background images of containers.

See Also:

• 10 Best Background Slideshows In JavaScript Or Pure CSS

How to use it:

1. Download the plugin and place the main script PhotoFlip.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/PhotoFlip.js"></script>

2. Define an array of background images for the slideshow.

images = new Array;
images[0] = "url('1.png')";
images[1] = "url('2.png')";
images[2] = "url('3.png')";
images[3] = "url('4.png')";
// ...

3. Call the function on the target container in which the plugin will place the background slideshow.

$("#container").PhotoFlip({
  // options here
}, images);

4. Config the smooth cross-fade transitions.

$("#container").PhotoFlip({
  interval: '3000', 
  transitionTime: '0.5s',
}, images);

5. Customize the styles of the background images.

$("#container").PhotoFlip({
  backgroundSize: 'cover',
  repeat: 'no-repeat',
}, images);

---

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