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

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

Posted on

This time I will share jQuery Plugin and tutorial about Fullscreen Responsive Background Slideshow with jQuery – cb-fsss.js, hope it will help you in programming stack.

Fullscreen Responsive Background Slideshow with jQuery cb fsss js - Download Fullscreen Responsive Background Slideshow with jQuery - cb-fsss.js
File Size: 54.9 KB
Views Total: 5130
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

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

3. Hide the horizontal and vertical scrollbars.

1 html, *{
2   margin: 0;
3   padding: 0;
4   overflow:hidden;
5 }

4. Customize the background slideshow using the following options.

01 $(".image").cbFullScreenSlideShow({
02  
03   // array of images
04   img: [],
05  
06   // width / height of the slideshow
07   width: "100vw",
08   height: "100vh",
09  
10   // z-index property
11   zindex: 999,
12  
13   // background color
14   background: "rgba(1,1,1,0)",
15  
16   // animation duration
17   duration: 1000,
18  
19   // animation interval
20   interval: 5000,
21  
22   // blur property
23   blur: "0px",
24  
25   // grayScale property
26   grayscale: "0%",
27  
28   // sepia property
29   sepia: "0%"
30    
31 });

5. API methods.

1 // start autoplay
2 $("body").cbFullScreenSlideShow("start");
3  
4 // stop the slideshow
5 $("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.

source : jquery.net