Messages changed randomly, animated

In this example there are messages shown which are changed randomly. The messages are animated, and if random gives the same message - it is not changed/animated.

To see effects demos visit effects page.

JavaScript
var slider = new BeaverSlider({
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    },
    messages: {
      bottom: 15,
      right: 15,
      containerClass: "message-container"
    },
    controls: {
      previewMode: false,
      align: "center",
      containerClass: "control-container",
      elementClass: "control-element",
      elementActiveClass: "control-element-active"
    }
  },
  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"
    ],
    messages: [
      "I am the message 1",
      "I am the message 2",
      "I am the message 3",
      "I am the message 4",
      "I am the message 5",
      "I am the message 6",
      "I am the message 7",
      "I am the message 8",
      "I am the message 9"
    ]
  },
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000,
    showMessages: "random",
    messageAnimationDirection: "down,right",
    messageAnimationDuration: 600,
    messageAnimationMaxHorLength: 100,
    messageAnimationMaxVerLength: 50,
    changeSameMessage: false
  }
});   
CSS
/* usual control elements */
.control-container {
  /* as far as controls are displayed as inline-block this puts them to center */
  /* choose left or right to put it to left/right */
  text-align: center; 
  
  /* margin from the bottom of slider */
  /* see demo to learn how to put panel over the slider */
  margin-top: 10px;
}

.control-element, .control-element-active {
  /* this displays element as inline-block; zoom and *display is a hack for ie7 which does not support inline-block */
  display: inline-block;
  zoom: 1;
  *display: inline;
  
  /* change this to the values you need */
  width: 7px;
  height: 7px;
  background: #d7f1ab;
  margin: 0 5px;
  cursor: pointer;
}

.control-element-active {
  background: #819462;
}

/* messages */
.message-container {
  background: #424242;
  color: white;
  font-size: 0.9em;
  font-family: PT Sans Narrow;
  padding: 5px;
}