Messages changed with corresponsing image

In this example there are messages shown which are changed with pictures, which they are connected to (every message is corresponding to image with the same order number). Take into account: after 4th message there is no messages assigned, that's why nothing is shown then.

To see effects demos visit effects page.

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: [
    messages: [
      "I am the message for image 1",
      "I am the message for image 2",
      "I am the message for image 3",
      "I am the message for image 4"        
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000,
    showMessages: "linked"
/* 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;