Dynamic Slideshow Background Plugin - backstretch
File Size: | 9.4 MB |
---|---|
Views Total: | 17180 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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