Dynamic Slideshow Background Plugin - backstretch

backstretch is an easy to use jQuery plugin that enables you to add awesome background images with slideshow effects to your webpage or any HTML element.  This plugin can automatically resize the background images to fit your need. 

How to use it:

1. Include jQuery Library and backstretch.js

<script src="../libs/jquery/jquery.js"></script>
<script src="../src/jquery.backstretch.js"></script>

2. Call the plugin

$.backstretch([
  "pot-holder.jpg",
  "coffee.jpg",
  "dome.jpg"
], {
    fade: 750,
    duration: 4000
});

3. All default settings.

// Amount of time in between slides (if slideshow)
duration: 5000,

// Type of transition between slides         
transition: 'fade',         

// Duration of transition between slides
transitionDuration: 0,      

// Animate the transition of first image of slideshow in?
animateFirst: true,         

// The x-alignment for the image, can be 'left'|'center'|'right' or any number between 0.0 and 1.0
alignX: 0.5,  

// The y-alignment for the image, can be 'top'|'center'|'bottom' or any number between 0.0 and 1.0            
alignY: 0.5,                

// Whether the images should slide after given duration
paused: false,              

// Index of the first image to show
start: 0,            

// How many images preload at a time?     
preload: 2,                 

// How many images can we preload in parallel?
preloadSize: 1,             

// How long to wait before switching resolution?
resolutionRefreshRate: 2500,

// How much a change should it be before switching resolution?
resolutionChangeRatioThreshold: 0.1,      

More examples

• Basic Demo
• Click Demo

Changelog:

v2.1.18 (2019-09-18)

• Avoid collisions with other libraries importing youtube api

v2.1.17 (2018-11-27)

• New: Added scale feature.

---

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