Events handling

Demo ini menunjukkan bagaimana untuk menangani peristiwa: sebelum animasi pesan ditampilkan dan disembunyikan setelah animasi selesai. Dengan menggunakan informasi dari "slider" parameter ada kemungkinan untuk mendapatkan informasi tambahan.

JavaScript

var slider = new BeaverSlider({
structure: {
container: {
id: "demo-slider",
width: 720,
height: 420
}
},
content: {
images: [
"/img/slider-demo/1.jpg",
"/img/slider-demo/2.jpg",
"/img/slider-demo/3.jpg",
"/img/slider-demo/4.jpg",
"/img/slider-demo/5.jpg",
"/img/slider-demo/6.jpg",
"/img/slider-demo/7.jpg",
"/img/slider-demo/8.jpg",
"/img/slider-demo/9.jpg",
"/img/slider-demo/10.jpg"
]
},
animation: {
waitAllImages: true,
effects: effectSets["slider: big set 2"],
initialInterval: 1000,
interval: 2000
},
events: {
beforeSlide: function() {
$("#status-message").css("visibility","visible");
},
afterSlideStart: function(slider) {
$("#status-message-number").html(slider.currentImage);
$("#status-message-effect").html('"' + slider.currentEffect.name + '"');
},
afterSlide: function() {
$("#status-message").css("visibility","hidden");
}
}
});

CSS

/* events */
#status-message {
visibility: hidden;
font-weight: bold;
color: red;
}

HTML

<p id="status-message">
    The picture number <span id="status-message-number"></span>
    is animated using effect <span id="status-message-effect"></span>
</p>