Fullscreen Background Slideshow/Carousel With CSS3 Transitions – Bgzy.js

Preview:

Description:

Bgzy.js is a JavaScript plugin for creating a configurable fullscreen background slideshow/carousel with cool CSS3 transitions.

How to use it:

1. Load the Bgzy.js plugin’s files in the document.

<link rel="stylesheet" href="css/bgzy.css" />
<script src="bgzy.js"></script>

2. Initialize the Bgzy.js and specify an array of images to be displayed in the slideshow.

bgzy.inst([
  "1.jpg",
  "2.jpg",
  "3.jpg",
]);

3. Assign transition effects to images. OPTIONAL.

bgzy.inst([
  ["1.jpg", "fadeOut"],
  ["2.jpg", "zoomFadeOut"],
  ["3.jpg", "slideLeft"]
]);

4. Available options to customize the background slideshow.

bgzy.inst([
  // images here
],{
    zIndex: -9999,
    wrapperClass: "bgzy",
    backgroundClass: "bg",
    showTicker: false, // show countdown bar
    tickerClass: "ticker",
    autoplay: true,
    timeout: 3000,
    fx: "fadeOut",
    fxDuration: 1000
});

5. API methods.

// start the background slideshow
bgzy.play();
// goto the next image
bgzy.next();
// back to the previous image
bgzy.prev();