Background Image Slideshow using Javascript

Today, I’m here with another cool JavaScript based background image slideshow that can be used to slide images with caption text. Although, it is a simple slider but it can be fully customize in JavaScript with its basic options. It has the ability to slides through any HTML contents at a certain speed.

If you already have a lot of JavaScript on your web page then you can go with CSS Background Image Slider which builds with only CSS.

Its have bulletin functionality and also have the left/right arrow to slide the images. It is a fullscreen photo slider which is best for one-page design sites.

You can easily turn into a small slider instead of fullscreen by placing the HTML code into a container.

The slider comes with basic functions to control the autoplay, add delay and set the slide speed. It allows customizing the class using JavaScript. If you are unfamiliar with JavaScript, you can getting started with it.

How to use Background Image Slideshow using JavaScript?

First of all, download this project and include “simpleSlider.min.css" CSS file into the head tag of your HTML document. Also, include JavaScript file “simpleSlider.min.js" just before the closing body tag.

<link rel="stylesheet" href="dist/simpleSlider.min.css">
<script src="dist/simpleSlider.min.js"></script>

After loading slider’s assets, create HTML structure for image slider as follows:

<div class="simple-slider simple-slider-demo">
  <div class="slider-wrapper">
    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      First slide
    </div>
    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      Second slide
    </div>
    <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">
      Third slide
    </div>
  </div>
  <div class="slider-btn slider-btn-prev"></div>
  <div class="slider-btn slider-btn-next"></div>
</div>

Initialize the slider in HTML script tag and done.

var slider = new simpleSlider('.simple-slider-demo');

If you want to customize the transition duration in milliseconds. Use the speed option in plugin initialization and pass your value in numbers.

var slider = new simpleSlider('.simple-slider-demo',{
    speed: 2000
});

Set the delay between transitions in milliseconds. Pass your value in number.

var slider = new simpleSlider('.simple-slider-demo',{
    delay: 6000
});

If you want to Enable/disable autoplay functionality, use the following option. Possible values are true and false. The value “true” means enable and “false” means disable.

var slider = new simpleSlider('.simple-slider-demo',{
    autoplay: true
});

The following are default CSS classes used in slider.

var slider = new simpleSlider('.simple-slider-demo',{
    classes: {
      wrapper: 'slider-wrapper',    // wrapper class [string]
      slide: 'slider-slide',    // slide class [string]
      buttons: 'slider-btn'   // buttons class [string]
    }
});