Amazing Background & Slideshow Plugin - Vegas

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.