Custom widget

This is an example how messages can be also used: any HTML-code is allowed to be used instead of message. Now there is a nice form shown over a slider.

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: "widget-container"
    }
  },
  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: [
      "<table>" +
      "<tr><td>Login</td><td><input type='text' /></td></tr>" + 
      "<tr><td>Password</td><td><input type='password' /></td></tr>" +
      "<tr><td></td><td><input type='button' value='Login' /></td></tr>" +
      "</table>"
    ]
  },
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000,
    changeMessagesAfter: 999999999999999999999999999999
  }
});   
CSS
/* widget */
.widget-container {
  background: #424242;
  color: white;
  font-size: 0.9em;
  font-family: PT Sans Narrow;
  padding: 5px;
}

.widget-container td {
  padding: 2px 4px;
}

.widget-container input {
  width: 153px;
}