Preview control panel

The demo shows the second type of control panel below the slider: images which are rendered using corresponding classes from CSS.

Here we also track the event when the animation is started and move the scroll to the active picture. This is really useful if the list is too big. slider.currentImage - 2 means to leave 2 pictures from the left if it is possible.

To see effects demos visit effects page.

JavaScript
var slider = new BeaverSlider({
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    },
    controls: {
      previewMode: true,
      align: "center",
      containerClass: "control-container-img",
      elementClass: "control-element-img",
      elementActiveClass: "control-element-active-img"
    }
  },
  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
  },
  events: {
    afterSlideStart: function(slider) {
      var scrollTo = (slider.currentImage - 2) * $(".control-element-active-img").width();
      
      $(".control-container-img").animate({ scrollLeft: scrollTo }, 400);
    }
  }
});   
CSS
/* image-preview control elements */
.control-container-img {
  /* as far as contorls are displayed as inline-block this puts them to center */
  /* choose left or right to put it to left/right */
  text-align: center; 
  
  /* change this to the values you need */
  margin-top: 1px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.control-element-img, .control-element-active-img {
  /* 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: 150px;
  height: 88px;
  margin: 0;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40)
}

.control-element-img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70)
}

.control-element-active-img {
  opacity: 1;
  filter: alpha(opacity=100)
}

.control-element-img img, .control-element-active-img img {
  width: 150px;
  height: 88px;
}