Cloud9carousel side demo

HTML

<script src="https://specious.github.io/cloud9carousel/js/lib/jquery.cloud9carousel.js"></script>
<div id="showcase" class="noselect" >
        <img class="cloud9-item" src="https://specious.github.io/cloud9carousel/images/browsers/firefox.png" alt="Firefox" title="Firefox description firefox description firefox description firefox description firefox ">
        <img class="cloud9-item" src="http://specious.github.io/cloud9carousel/images/browsers/wyzo.png" alt="Wyzo" title="Wyzo description Wyzodescription Wyzodescription Wyzodescription Wyzo">
        <img class="cloud9-item" src="http://specious.github.io/cloud9carousel/images/browsers/opera.png" alt="Opera" title="Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description Opera description ">
        <img class="cloud9-item" src="http://specious.github.io/cloud9carousel/images/browsers/chrome.png" alt="Chrome" title="Chrome description Chrome description Chrome description Chrome description ">
        <img class="cloud9-item" src="http://specious.github.io/cloud9carousel/images/browsers/iexplore.png" alt="Internet Explorer" title="IE description">
    </div>
    <nav>
        <a href="#" class="prev">↑</a>
        <a href="#" class="next">↓</a>
    </nav>
    <content>
        <h2></h2>
        <div id="descr"></div>
    </content>

CSS

body {
  min-width:900px;  
}
#showcase {
  width:350px;
  height:350px;
  float:left;
}
#item-title {
  color: #F31414;
  font-size: 29px;
  letter-spacing: 0.13em;
  text-shadow: 1px 1px 6px #C72B2B;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 22px;
}
#share {
  top: -9px;
}
#credits {
  top: -15px;
}
img {
    width:80px;
}
.next,.prev {
    display:block;
    font-weight:bold;
    text-decoration:none;
    font-size:40px;
}
.next {
    margin-top:70px;
}
nav {
    float:left;
    margin:80px 20px
}
content {
    float:left;
    margin-top:80px;
    width:300px;
    margin-left:50px;
}

JavaScript

var showcase = $("#showcase");

            var carousel = showcase.Cloud9Carousel({
                yOrigin: 130,

                xRadius: 100,
                yRadius: 100,

                farScale:1,
                buttonLeft: $(".next"),
                buttonRight: $(".prev"),
                bringToFront: true,
                onRendered: function(carousel){
                    $('h2').text(carousel.nearestItem().element.alt);
                    $('#descr').text(carousel.nearestItem().element.title);
                },
                onLoaded: function() {
                    showcase.css( 'visibility', 'visible' )
                    showcase.css( 'display', 'none' )
                    showcase.fadeIn( 1500 )
                }
            })
            
            $('.test').click(function(){
                $("#showcase").go( 3 );
            });