Amazing Background & Slideshow Plugin - Vegas
File Size: | 103 KB |
---|---|
Views Total: | 27993 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Vegas is an amazing jQuery Plugin for adding beautiful fullscreen backgrounds to your webpages. You can also use it to create a stylish Slideshow for your webpage.
Basic Usage:
1. Include jQuery Library and the jquery.vegas.js in your HTML document.
<script src="/path/to/cdn/jquery.js"></script> <script src="/path/to/dist/vegas.min.js"></script>
2. Include the necessary stylesheet.
<link rel="stylesheet" href="/path/to/dist/vegas.min.css" />
3. Call the plugin on the target container and add your own images to the slideshow as follows:
$(function() { $('body').vegas({ slides: [ { src: 'img1.jpg' }, { src: 'img2.jpg' }, { src: 'img3.jpg' } ] }); }
4. Full options to customize the slides.
$('body').vegas({ slides: [ { // path to image src: null, // background color color: null, // transition delay delay: null, // horizontal alignment // center top right bottom left or a percentage align: null, // vertical alignment valign: null, // transition type: // fade, fade2, slideLeft, slideLeft2, slideRight // slideRight2, slideUp, slideUp2, slideDown // slideDown2, zoomIn, zoomIn2, zoomOut, zoomOut2 // swirlLeft, swirlLeft2, swirlRight, swirlRight2 // burn, burn2, blur, blur2, flash, flash2 // or random transition: null, // transition duration transitionDuration: null, // animation type // same to transition type animation: null, // animation duration animationDuration: null, // true the slide image is scaled to fit the container. // false the slide image is displayed entirely. // repeat the slide image is repeated. cover: true, // add a vidoe to the slide video: { src: [], mute: true, loop: true } ] });
5. Full options to customize the slideshow.
$('body').vegas({ // intial slide slide: 0, // transition delay delay: 5000, // infinite loop loop: true, // enable ontent content preload preload: false, preloadImage: false, preloadVideo: false, // shows timer bar timer: true, // shows overlay overlay: false, // enables autoplay autoplay: true, // the array of slides is shuffled before. shuffle: false, // true the slide image is scaled to fit the container. // false the slide image is displayed entirely. // repeat the slide image is repeated. cover: true, // background color color: null, // center top right bottom left or a percentage. align: 'center', valign: 'center', // set the transition for the first slide firstTransition: null, // set the transition duration for the first slide firstTransitionDuration: null, // transition type transition: 'fade', // transition duration transitionDuration: 1000, // or create your own transition transitionRegister: [], // animation type animation: null, // duration of the animation animationDuration: 'auto', // or create your own animation animationRegister: [], // number of slides to keep in the background before removing it slidesToKeep: 1 });
6. Available callback functions:
$('body').vegas({ init: function () {}, play: function () {}, pause: function () {}, walk: function () {}, });
Changelog:
v2.5.4 (2021-01-30)
- Use relative URL for overlay image
v2.5.3 (2020-12-18)
- Fix padding issue on Firefox
v2.5.1/2 (2020-04-25)
- Fix the height of the container when Vegas is in a div
v2.4.4 (2018-10-31)
- Update
v2.4.2 (2018-09-19)
- Update dev packages
- Code formating
- Remove IOS7 css hack.
v2.4.1 (2018-09-18)
- Optimise overlay png with tinypng
- Fix a glitch on blur transition effect
- Autplay Enabled - Jump to a specific slide fix
v2.4.0 (2017-01-05)
- Add will-change CSS property to slides
- Add slidesToKeep option to set the number of slides kept behind the main slide
v2.3.1 (2016-09-19)
- Fix slide src path names that contain blank characters
v2.3.0 (2016-09-17)
- Add firstTransition and firstTransitionDuration options
- Add Loop option to settings and end callback
- Check image complete property in addition to onload before changing slide.
v2.2.1 (2016-05-05)
- Fixed _random to match last item also.
v2.2.0 (2016-01-18)
- Add cover:repeat option to display background as tiled and not resized
v2.1.3 (2015-04-29)
- Fix 'TypeError' on destroy
v2.1.2 (2015-04-15)
- Fix with video preloading issue
v2.1.1 (2015-04-08)
- Fix overlay destruction
v2.1.0 (2015-04-03)
- Add destroy method
v2.0.5 (2015-03-18)
- Remove video canplay event not triggered properly on Firefox
- Timer color set to neutral white by default
v2.0.4 (2015-03-13)
- New video options mute and loop
- Enhance quick transition change
v2.0.3 (2015-03-07)
- Restore missing overlays
- Fix a bug with random transitions
- Remove Transition/Animation auto-detection
- Aad TransitionRegister/AnimationRegister options instead
v2.0.1 (2015-03-06)
- Brand new Vegas V2
v1.3.5 (2014-10-14)
- update
v1.3.4 (2013-12-16)
- Allow overlay(false) to disable overlay when vegas is already running
- Fix loading option which didn't work on slideshows
This awesome jQuery plugin is developed by jaysalvat. For more Advanced Usages, please check the demo page or visit the official website.