Minimalist Background Slideshow Plugin - jQuery slideshow.js

A minimal, simple-to-use, jQuery based, cross-fading slideshow that dynamically loads backgrounds from an array of images.

1. Load the slideshow.js after loading jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="slideshow.js"></script>

2. Create a new Slideshow instance and specify the container in which the slideshow will be placed.

<div class="example" id="demo">
</div>

var slideshow = new Slideshow({
    backgroundElementId: "demo"
});

3. Define an array of background images for the slideshow.

slideshow.setImages(['1.jpg','2.jpg','3.jpg',]);

4. Activate the background slideshow.

slideshow.run();

5. Config the animation speed & autoplay interval.

var slideshow = new Slideshow({
    tickInterval: 5000,
    transitionTime: 800,
    backgroundElementId: "demo"
});

9. Make the background images always be centered in the container.

.example {  
  background-position: 50% 50%; 
  background-size: cover;
}

This awesome jQuery plugin is developed by doomy. For more Advanced Usages, please check the demo page or visit the official website.