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