JavaScript - Vegas Slider
Aus Wikizone
Version vom 7. Juni 2017, 07:41 Uhr von 91.33.206.179 (Diskussion)
Siehe auch:
Beispiel
<script type="text/javascript">// <![CDATA[
var $slider;
jQuery( document ).ready(function( $ ) {
$slider = $(".vegas");
$slider.vegas({
preload: false,
preloadVideo: true,
delay:7000,
timer:false,
transition: "fade2",
transitionDuration: 1500,
animation: "random",
slides: [
{ src: "http://szenerie-events.de/images/vegas/Slide01.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide02.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide1.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide2.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide3.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide4.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide5.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide6.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide7.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide8.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide9.jpg" }
]
});
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
});
// ]]></script>
Tipps und Tricks
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
Documentation
SETTINGS
Slideshow options and settings
OPTION DEFAULT DESCRIPTION
slide 0 Index number of initial slide.
preload false Preload both images and videos at start.
preloadImage false Preload images at start. preload must be false .
preloadVideo false Preload videos at start. preload must be false .
timer true Display/hide timer bar.
The timer class is .vegas-timer-progress .
overlay false Display/hide the overlay. Could be true false or the path of an overlay image pattern. These image can be found in the overlays folder. Read the Overlay section for more information.
autoplay true Start the Slideshow automatically.
loop true Loop the Slideshow.
shuffle false The array of slides is shuffled before.
delay 5000 Delay beetween slides in milliseconds.
cover true true the slide image is scaled to fit the container.
false the slide image is displayed entirely.
repeat the slide image is repeated.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition between slides. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
firstTransition - Set the transition for the first played slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
firstTransitionDuration - Set the transition duration in milliseconds for the first played slide. Could be auto so the transition duration will be equal to the slide delay .
transitionRegister - Add custom transitions to the transitions list available in random mode. Read the Transition section for more information.
animation - Set the animation of the slides. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
animationRegister - Add custom animations to the animations list available in random mode. Read the Transition section for more information.
slidesToKeep 1 Number of slides to keep in the background before removing it.
slides - Array of slides.
Read the option section for more information.
$elmt.vegas({
delay: 7000,
timer: false,
shuffle: true,
firstTransition: 'fade',
firstTransitionDuration: 5000,
transition: 'slideDown2',
transitionDuration: 2000,
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
]
});
TEST THE CODE
Click the button to test the example.
RUN CODE
SLIDE SETTINGS
Specific slide options and settings.
OPTION DEFAULT DESCRIPTION
src - Path of the image.
video - Path of the video. Could be a string or an array of sources.
Read the Video section for more information.
delay 5000 Delay beetween slides in milliseconds.
cover true true the background image is scaled to fit the container.
false the background image is displayed entirely.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition of this slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
animation - Set the animation of this slide. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
$elmt.vegas({
timer: false,
transition: 'slideLeft2',
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg', transition: 'slideRight2' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg', transition: 'slideRight2' }
]
});
TEST THE CODE
Click the button to test the example.
RUN CODE
CALLBACKS AND EVENTS
VEGAS provides callback functions and events triggers on init, play, pause and slide change.
OPTION EVENT DESCRIPTION
init vegasinit Function called when Vegas is applied to an element.
play vegasplay Function called when Vegas starts to play the slideshow.
pause vegaspause Function called when Vegas pauses the slideshow.
walk vegaswalk Function called when Vegas changes the slide.
end vegasend Function called when the Slideshow is completed (loop: false).
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
],
init: function (globalSettings) {
console.log("Init");
},
play: function (index, slideSettings) {
console.log("Play");
},
walk: function (index, slideSettings) {
console.log("Slide index " + index + " image " + slideSettings.src);
}
});
TEST THE CODE
Click the button to test the example.
RUN CODE
$elmt.on('vegaspause', function (e, index, slideSettings) {
console.log("Pause on Slide index " + index);
});
OVERLAYS
Overlays are repeated dot pattern that can be applied to reduce artefact effects on scaled backgrounds.
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
overlay: true
});
010203040506070809
The overlay class is.vegas-overlay .
VIDEOS
Experimental video support is providedAS A BONUS . Video backgrounds could not behave as expected on some browsers. Use it at your own risk :)
OPTION DEFAULT DESCRIPTION
video.src [] Array of videos files
video.loop true Loop the video
video.mute true Mute the sound of the video
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg',
video: {
src: [
'/videos/video.mp4',
'/videos/video.webm',
'/videos/video.ogv'
],
loop: false,
mute: true
}
}
]
});
TEST THE CODE
Click the button to test the example.
RUN CODE
Imagesrc is required for video slides as a fallback when videos cannot be played. The fallback image will be displayed instead. By default VEGAS excludes mobile devices.
$.vegas.isVideoCompatible = function () {
var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
return !devices.test(navigator.userAgent);
}
Override this function if needed.
