Fullscreen Background Image Slideshow using Javascript

Category: Slideshow | July 18, 2018
Author: eugeniosegala
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

Its an extremely easy Vanilla Js fullscreen image slideshow which works as a background. If you are working on a project which has one page then add this slider as background to enhance the beauty.

It is well lightweight, easy and clear slideshow which don’t need to write a lot of HMTL. It can be implemented by using a few lines of Javascript and then to make it fullscreen, you need to define only one CSS class.

Create Fullscreen Background Photo Slider

You don’t need many files to include but one Javascript file.

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

Don’t need to Add HTML but to add content over the slider, simply define the container because the slider work with body tag which will be defined in Javascript.

<div class="container ct">
    <div class="row">
       Add HTML or Content Here.
     </div>
</div>

There is nothing about styling the slider but need to add one CSS class to make the slider work in fullscreen.

.ct {
      height: 95.8vh;
      display: flex;
      justify-content: center;
      text-align: center;
 }

T0 add different images and initialize the Javascript as following.

<script>
easy_background("body",
  {
    slide: ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"],
    delay: [2000, 2000, 2000, 2000, 2000]
  }
);
</script>