Background Image Slideshow using Javascript

Background Image Slideshow using Javascript

This is another great slideshow for images which can be used as a background. It builds with Javascript but dead simple and lightweight.

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.

This Javascript slider is simple with basic options. It has the ability to slides through any HTML contents at a certain speed.

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.

How to use Background Image Slideshow using Javascript?

Include the stylesheet ‘simpleSlider.min.css’ in the head section, and the JavaScript file simpleSlider.min.js right before the closing body tag.

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

The HTML structure for the slider.

<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 and done.

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

Customize the transition duration in milliseconds.

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

Set the delay between transitions in milliseconds.

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

Enable/disable the autoplay functionality.

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

Default CSS classes.

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]
    }
});

Code ExamplesYou May Also Like