En enkel karusell

#wrapper {
  width:200px;
  height:140px;
  position:relative;
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  
  transform: scale(0.7, 0.7);
  }
#slider {
  position: absolute;
  height: 100%;
  width: 100%;
    -webkit-transform: translateZ( -241px );
     -moz-transform: translateZ( -241px );
       -o-transform: translateZ( -241px );
          transform: translateZ( -241px );
    -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
     -moz-transition: -moz-transform 2s;
       -o-transition: -o-transform 2s;
              transition: transform 2s
}
face {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 10px;
    top: 10px;
    background: rgba(255,255,255,1);
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    font-size: 27px;
    text-align: center;
    line-height: 1em;
    color: rgba(0,0,0,0.5);
    font-family: sans-serif;
    border: 1px solid #555;
}
#slider face:nth-child(1){ 
    -webkit-transform: rotateY(   0deg ) translateZ( 241px );
    -moz-transform: rotateY(   0deg ) translateZ( 241px );
    -o-transform: rotateY(   0deg ) translateZ( 241px );
    transform: rotateY(   0deg ) translateZ( 241px );
}
#slider face:nth-child(2){
    -webkit-transform: rotateY(   45deg ) translateZ( 241px );
    -moz-transform: rotateY(   45deg ) translateZ( 241px );
    -o-transform: rotateY(   45deg ) translateZ( 241px );
    transform: rotateY(   45deg ) translateZ( 241px );
}
#slider face:nth-child(3){ 
    -webkit-transform: rotateY(   90deg ) translateZ( 241px );
    -moz-transform: rotateY(   90deg ) translateZ( 241px );
    -o-transform: rotateY(   90deg ) translateZ( 241px );
    transform: rotateY(   90deg ) translateZ( 241px );
}
#slider face:nth-child(4){ 
    -webkit-transform: rotateY(   135deg ) translateZ( 241px );
    -moz-transform: rotateY(   135deg ) translateZ( 241px );
    -o-transform: rotateY(   135deg ) translateZ( 241px );
    transform: rotateY(   135deg ) translateZ( 241px );
}
#slider face:nth-child(5){ 
    -webkit-transform: rotateY(   180deg ) translateZ( 241px );
    -moz-transform: rotateY(   180deg ) translateZ( 241px );
    -o-transform: rotateY(   180deg ) translateZ( 241px );
    transform: rotateY(   180deg ) translateZ( 241px );
}
#slider face:nth-child(6){ 
    -webkit-transform: rotateY(   225deg ) translateZ( 241px );
    -moz-transform: rotateY(   225deg ) translateZ( 241px );
    -o-transform: rotateY(   225deg ) translateZ( 241px );
    transform: rotateY(   225deg ) translateZ( 241px );
}
#slider face:nth-child(7){ 
    -webkit-transform: rotateY(   270deg ) translateZ( 241px );
    -moz-transform: rotateY(   270deg ) translateZ( 241px );
    -o-transform: rotateY(   270deg ) translateZ( 241px );
    transform: rotateY(   270deg ) translateZ( 241px );
}
#slider face:nth-child(8){ 
    -webkit-transform: rotateY(   315deg ) translateZ( 241px );
    -moz-transform: rotateY(   315deg ) translateZ( 241px );
    -o-transform: rotateY(   315deg ) translateZ( 241px );
    transform: rotateY(   315deg ) translateZ( 241px );
}
#slider face img{margin-top:40px}

// globals
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
var prop;
var xAngle = 0;
var yAngle = 0;
// must match attributes in #wrapper
var faceW=200;
var faceH=140;
var dYangle=45;
// id of stylesheet
var cubesheet="sliderstyles";
function setUp(){
    
    // identify properties that are relevant for this browser 
    var el = document.createElement('div');
    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    
    
    // set up click-action
    document.querySelector("#slider").
        addEventListener('click', clickChange ,false);
    
    // set up key-action
    document.getElementsByTagName("body")[0].
        addEventListener('keydown', keyChange ,false);
    
    change(1,1);
}
// when keypressed
function keyChange(evt){
    switch(evt.keyCode) {
        case 37: // left
            yAngle -= dYangle;
            break;
        case 38: // up
            xAngle += 90;
            evt.preventDefault();
            break;
        case 39: // right
            yAngle += dYangle;
            break;
        case 40: // down
            xAngle -= 90;
            evt.preventDefault();
            break;
    };
    change(xAngle,yAngle);
}
// when clicked
function clickChange(evt){
    var relX=evt.layerX;
    var relY=evt.layerY;
    
    if(relX > 3*faceW/4)
        yAngle+=dYangle;
    else if(relX < faceW/4)
        yAngle-=dYangle;
    
    if(relY > 3*faceH/4)
        xAngle-=dYangle;
    else if(relY < faceH/4)
        xAngle+=dYangle;
    
    // reset with a centered click
    if((relX > faceW/4)&&
      (relX < 3*faceW/4)&&
      (relY > faceH/4)&&
      (relY < 3*faceH/4)){
          xAngle=yAngle=0;
      }
    change(xAngle,yAngle);
}
// do it
function change(xA,yA){
    document.getElementById('slider').style[prop] = 
      "rotateX("+xA+"deg) rotateY("+yA+"deg)";
}

<div style="margin-left:80px">
<div id="wrapper" >
    <div id="slider">
        <face>
        <img src="images/bs1.png"/>
        </face>
        <face>
        <img src="images/bs2.png"/>
        </face>
        <face>
        <img src="images/bs3.png"/>
        </face>
        <face>
        <img src="images/bs5.png"/>
        </face>
        <face>
        <img src="images/bs6.png"/>
        </face>
        <face>
        <img src="images/bs8.png"/>
        </face>
        <face>
        <img src="images/bs9.png"/>
        </face>
        <face>
        <img src="images/bs10.png"/>
        </face>
    </div>
</div><!--wrapper -->
</div>
<script>
window.addEventListener( 'DOMContentLoaded', setUp, false);
</script>