Player panel with text

This is an example of showing an additional panel over a slider: player controls. This example is done using text as a control. The panel is shown when the mouse is over it.

To see effects demos visit effects page.

var slider = new BeaverSlider({
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    player: {
      show: "mouseover",
      top: 15,
      right: 15,
      backText: "back",
      forwardText: "next",
      pauseText: "stop",
      playText: "play",
      containerClass: "player-text-container",
      backClass: "player-text-back",
      forwardClass: "player-text-forward",
      pauseClass: "player-text-pause",
      playClass: "player-text-play"
  content: {
    images: [
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000
/* usual player with text */
.player-text-container {
  background-position: 0 0;
  color: white;
  height: 28px;
  width: 151px;
  font-family: PT Sans Narrow;
  font-size: 1.3em;
  background-image: url(../img/slider-demo/player-sprite.png);

.player-text-container div {
  display: inline-block;
  font-size: 0.8em;
  margin: 0 10px;
  cursor: pointer;
  width: 29px;

.player-text-pause:hover, .player-text-play:hover, .player-text-forward:hover, .player-text-back:hover {
  text-decoration: underline;