Simple control panel over the slider

The demo shows the first type of control panel over the slider: usual buttons which are rendered using corresponding classes from CSS.

To see effects demos visit effects page.

JavaScript
var slider = new BeaverSlider({
  structure: {
    type: "slider",
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    },
    controls: {
      previewMode: false,
      align: "center",
      containerClass: "control-container-over",
      elementClass: "control-element-over",
      elementActiveClass: "control-element-active-over"
    }
  },
  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 control elements over slider */
.control-container-over {
  /* fixes it on the top in the 3d world (the effects area of a slider has 100 by default) */
  position: relative;
  z-index: 101;
  
  /* put panel over the slider */
  margin: -35px 0 0 10px;
  
  /* put panel in the middle */
  /* margin: -30px auto; */
  
  background-color: rgba(215,241,171,0.6);
  padding: 3px 5px;
  
  /* change width to your value */
  width: 200px;
}

.control-element-over, .control-element-active-over {
  /* 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: 10px;
  height: 10px;
  border-radius: 5px 5px 5px 5px;
  background: white;
  margin: 0 5px;
  cursor: pointer;
}

.control-element-active-over {
  background: #424242;
}