Events handling

The picture number is animated using effect

This demo shows how to handle events: before animation the message is shown and is hidden after animation is done. By using the information from "slider" parameter there is a possibility to get an additional information.

To see effects demos visit effects page.

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>