
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 jquery.vegas.js in your head section
<script src="jquery.js"></script> <script src="vegas/jquery.vegas.js"></script>
2. Include the CSS
<link rel="stylesheet" href="vegas/jquery.vegas.css">
3. call the plugin with the options you want
$(function() { $('body').vegas({ slides: [ { src: 'img1.jpg' }, { src: 'img2.jpg' }, { src: 'img3.jpg' } ] }); }
4. Full options with default values.
slide: 0, delay: 5000, loop: true, preload: false, preloadImage: false, preloadVideo: false, timer: true, overlay: false, autoplay: true, shuffle: false, cover: true, color: null, align: 'center', valign: 'center', firstTransition: null, firstTransitionDuration: null, transition: 'fade', transitionDuration: 1000, transitionRegister: [], animation: null, animationDuration: 'auto', animationRegister: [], slidesToKeep: 1, init: function () {}, play: function () {}, pause: function () {}, walk: function () {}, slides: [ // { // src: null, // color: null, // delay: null, // align: null, // valign: null, // transition: null, // transitionDuration: null, // animation: null, // animationDuration: null, // cover: true, // video: { // src: [], // mute: true, // loop: true // } // ... ]
Changelog:
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)
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.
- Publication date: 18.09.2018
- Source