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
Post Name | Vegas Backgrounds Slideshows |
Author Name | jaysalvat |
Category | Slider, Slideshow |
Official Page | Click Here | Click Here |
Official Website | github.com, vegas.jaysalvat.com |
Publish Date | January 31, 2021 |
Last Update | June 28, 2023 |
Download | Link Below |
License | MIT |
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.