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.
background image carousel jquery, automatic background image slider in html css, jquery banner slider, div background image slider jquery, animated slider jquery
How to make use of it:
1. Include jQuery Library and the jquery.vegas.js in your HTML doc.
<script src="/path/to/cdn/jquery.js"></script> <script src="/path/to/dist/vegas.min.js"></script>
2. Include the mandatory 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 choices 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 choices 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 () {}, });
Amazing Background & Slideshow Plugin, Vegas Slideshows Github, jquery slides, text slider with background image, background image slideshow
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.