Basic Background Slideshow In JavaScript – easy_background

Category: Javascript , Slideshow | October 11, 2018
Author:eugeniosegala
Views Total:10,051 views
Official Page:Go to website
Last Update:October 11, 2018
License:MIT

Preview:

Basic Background Slideshow In JavaScript – easy_background

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

You Might Be Interested In:


One thought on “Basic Background Slideshow In JavaScript – easy_background

  1. Eugenio Segala

    Hi!

    Please update the article 🙂 The new version is more powerful! Thanks!

    Bye!

    Reply

Leave a Reply