Minimalist Background Slideshow Plugin - jQuery slideshow.js

File Size: 4.66 KB
Views Total: 4427
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/slideshow.min.js"></script>

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

<div class="example" id="demo">
var slideshow = new Slideshow({
    backgroundElementId: "demo"

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


4. Activate the background slideshow.;

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"

11. Callback function.

var slideshow = new Slideshow({
    onTransition: function(url){},



  • New config option: onTransition callback


  • Generated html ids to avoid conflict


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


  • 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.