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

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

  img: [

3. Hide the horizontal and vertical scrollbars.

html, *{
  margin: 0;
  padding: 0;

4. Customize the background slideshow using the following options.


  // 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

// stop the slideshow



  • Bugfix


  • 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.