Vegas is a jQuery / Zepto plugin for adding beautiful backgrounds and slideshows for DOM elements and you can also use it to create a stylish slideshow for your webpage.

Must Read: Slideshow for the Background Using JQuery Animation

Backgrounds and Slideshows jQuery Details

How to make use of it:

1. Include jQuery Library and 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 stylesheet.

<link rel="stylesheet" href="/path/to/dist/vegas.min.css" />

3. Call the plugin on the goal container and add your personal photos 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
   {
     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 capabilities:

$('body').vegas({

  init:  function () {},
  play:  function () {},
  pause: function () {},
  walk:  function () {},

});

See Demo And Download

Official Website(jaysalvat): Click Here

This superior jQuery/javascript plugin is developed by jaysalvat. For extra Advanced Usages, please go to the official website.