Fullscreen Responsive Background Slideshow with jQuery - cb-fsss.js

A lightweight and easy-to-use jQuery plugin for presenting an array of images as backgrounds in a fullscreen, responsive slideshow. The plugin has the ability to resize and center the images on the screen when the screen size changes, while preserving aspect ratios.

How to use it:

1. Put jQuery library and the cb-fsss.min.js jQuery plugin into your html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/cb-fsss.min.js"></script>

2. Generate a fullscreen background slideshow that loads image sources from img option.

$(".image").cbFullScreenSlideShow({
  img: [
    "1.jpg",
    "2.jpg",
    "3.jpg"
  ]
});

3. Hide the horizontal and vertical scrollbars.

html, *{
  margin: 0;
  padding: 0;
  overflow:hidden;
}

4. Customize the background slideshow using the following options.

$(".image").cbFullScreenSlideShow({

  // array of images
  img: [],

  // width / height of the slideshow
  width: "100vw",
  height: "100vh",

  // z-index property
  zindex: 999,

  // background color
  background: "rgba(1,1,1,0)",

  // animation duration
  duration: 1000,

  // animation interval
  interval: 5000,

  // blur property
  blur: "0px",

  // grayScale property
  grayscale: "0%",

  // sepia property
  sepia: "0%"
  
});

5. API methods.

// start autoplay
$("body").cbFullScreenSlideShow("start");

// stop the slideshow
$("body").cbFullScreenSlideShow("stop");

Changelog:

2018-10-18

• Bugfix

2016-02-09

• v0.3.4

---

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