Player panel with images

This is an example of showing an additional panel over a slider: player controls. This example is done using image as a control. The panel is always shown.

To see effects demos visit effects page.

JavaScript
var slider = new BeaverSlider({
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    },
    player: {
      show: "always",
      top: 15,
      right: 15,
      containerClass: "player-container",
      backClass: "player-back",
      forwardClass: "player-forward",
      pauseClass: "player-pause",
      playClass: "player-play"
    }
  },
  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
  }
});   
CSS
/* usual player with images */
.player-container {
  height: 28px;
  white-space: nowrap;
}

.player-pause, .player-play, .player-forward, .player-back {
  /* 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;
  
  cursor: pointer;
  margin-left: 5px;
  height: 28px;
  width: 33px;
  background-image: url(../img/slider-demo/player-sprite.png);
}

.player-pause {
  background-position: -199px 0;
  width: 28px;
}

.player-pause:hover {
  background-position: -161px 0;
}

.player-play {
  background-position: -356px 0;
  width: 28px;
}

.player-play:hover {
  background-position: -319px 0;
}

.player-back {
  background-position: -275px 0;
}

.player-back:hover {
  background-position: -234px 0;
}

.player-forward {
  background-position: -434px 0;
}

.player-forward:hover {
  background-position: -393px 0;
}