Simplest Fullscreen Background Slideshow With jQuery - Chocolate.js

chocolate.js is a simplest responsive fullscreen slideshow which allows you to fade through an array of background images at a specific speed.

How to use it:

1. Add the latest version of jQuery and the jQuery chocolate.js script to your html page.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.chocolate.js"></script>

2. Call the plugin and specify an array images for backgrounds.

$('body').chocolate({
  images    : ['1.jpg', '2.jpg']
});

3. Make the background slideshow responsive and full window.

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: cover;
}

4. Adjust the animation speed and transition delay.

$('body').chocolate({
  images    : ['1.jpg', '2.jpg'],
  interval  : 3000,
  speed     : 1000
});

---

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