Minimalist Background Slideshow Plugin - jQuery slideshow.js

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

How to use it:

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

10. Set the transition type you'd like to use. Possible transitions: slideHorizontal or fadeInOut.

var slideshow = new Slideshow({
    effect: "slideHorizontal"
});

Changelog:

2020-06-16

• Generated html ids to avoid conflict

2019-10-08

• Keep original background-size css property for temporary layer div

2019-09-18

• Better horizontal slide handling

---

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