Type: carousel

One of the most popular slider types, also the parent of word "slider" (probably the first slider historically). Here additional attention should be done to player buttons: "play" and "stop" are hidden, player panel is stretched to the whole width of slider and buttons "forward" and "back" are always shown on the sides of a slider.

To see effects demos visit effects page.

var slider = new BeaverSlider({
  type: "carousel",
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    player: {
      show: "always",
      containerClass: "player-container-carousel",
      backClass: "player-back-carousel",
      forwardClass: "player-forward-carousel",
      pauseClass: "player-pause-carousel",
      playClass: "player-play-carousel"
  content: {
    images: [
  animation: {
    waitAllImages: true,
    effects: effectSets["carousel: slideOver"],
    initialInterval: 1000,
    interval: 2000
/* carousel player */
.player-container-carousel {
  height: 132px;
  width: 720px;
  margin-top: 144px;

.player-back-carousel, .player-forward-carousel {
  background-image: url(../img/slider-demo/carousel-sprite.png);  
  height: 132px;
  width: 40px;
  float: left;
  opacity: 0.7;
  filter: alpha(opacity=70)

.player-forward-carousel {
  float: right;
  background-position: -47px;

.player-back-carousel:hover {
  background-position: -96px; 
  opacity: 1;
  filter: alpha(opacity=100)

.player-forward-carousel:hover {
  background-position: -144px;
  opacity: 1;
  filter: alpha(opacity=100)

/* dummy for missing buttons to display the forward button in the same row */
.player-pause-carousel, .player-play-carousel {
  /* 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;