Basic Background Slideshow In JavaScript – easy_background

Preview:

Description:

easy_background is a vanilla JavaScript library to create a responsive, automatic, dynamic background slideshow from an array of images.

How to use it:

Download and insert the JavaScript file easy_background.js into the document.

<script src="easy_background.js"></script>

Initialize the background slideshow and pass the following parameters to the easy_background() function.

• selector: where to place the background slideshow.
• a1, b1, c1, d1, e1: transition delay in milliseconds.
• a2, b2, c2, d2, e2: image paths.

// easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2)
easy_background("body", 3000, "1.jpg", 3000, "2.jpg", 3000, "3.jpg", 3000, "4.jpg", 3000, "5.jpg");

Add a smooth transition effect to the background slideshow using CSS3.

body {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
  height: 100%;
  width: 100%;
}

Changelog:

10/11/2018

• Added transition duration