Minimal Background Slideshow Plugin - jQuery PhotoFlip

File Size: 6.28 KB
Views Total: 836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.

  // options here
}, images);

4. Config the smooth cross-fade transitions.

  interval: '3000', 
  transitionTime: '0.5s',
}, images);

5. Customize the styles of the background images.

  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.