Amazing Background Slideshow Plugin for jQuery & Vanilla JS - Vegas

Vegas is an amazing jQuery & Vanilla JS Plugin for adding beautiful fullscreen backgrounds to your webpages. You can also use it to create a stylish Slideshow for your webpage.

See It In Action:

Basic Usage:

1. Download and import the latest Vegas library into your document.

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

<!-- Vanilla JS -->
<script type="module">
  import vegas from './dist/vegas.js'
</script>

<!-- jQuery -->
<script src="/path/to/cdn/jquery.js"></script>
<script src="/path/to/dist/jquery.vegas.min.js"></script>

2. Call the plugin on the target container and add your own images to the background slideshow as follows:

// Vanilla JS
const settings = {
  delay: 4000,
  transition: 'fade',
  transitionDuration: 1000,
  animation: 'kenburns',
  animationDuration: 4000,
  timer: true,
  overlay: true,
  slides: [
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' },
    { src: '4.jpg' },
    { src: '5.jpg' }
  ],
  walk(index) {
    document.getElementById('slide-info').textContent = `Slide ${index + 1} / 5`
  }
}
const slideshow = vegas('body', settings)

// jQuery
const settings = {
  delay: 4000,
  transition: 'fade',
  transitionDuration: 1000,
  animation: 'kenburns',
  animationDuration: 4000,
  timer: true,
  overlay: true,
  slides: [
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' },
    { src: '4.jpg' },
    { src: '5.jpg' }
  ],
  walk(index) {
    $('#slide-info').text(`Slide ${index + 1} / 5`)
  }
}
$('body').vegas(settings)

3. Full plugin options to customize the background slideshow.

const settings = {
  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 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: 'fade',
  transitionDuration: 1000,
  transitionRegister: [],
  animation: null,
  animationDuration: 'auto',
  animationRegister: [],
  slidesToKeep: 1,
  init: () => {},
  play: () => {},
  pause: () => {},
  walk: () => {},
  slides: [
    // {
    //  src:                null,
    //  color:              null,
    //  delay:              null,
    //  align:              null,
    //  valign:             null,
    //  transition:         null,
    //  transitionDuration: null,
    //  animation:          null,
    //  animationDuration:  null,
    //  cover:              true,
    //  video: {
    //      src: [],
    //      muted: true,
    //      loop: true
    // }
    // ...
  ]
}

4. API methods.

slideshow.previous()
slideshow.next()
slideshow.toggle()

Related Resources:

• 10 Best Background Slideshows In JavaScript & Pure CSS

Changelog:

v3.0.0 (2026-02-20)

• Added vanilla JS version
• Remove SASS to standard CSS

v2.6.0 (2024-07-31)

• Play video inline

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.