Circular Content Carousel with jquery

Circular Content Carousel with jquery

Hi All,

I am using this plugin for a carousel that shows more info on the items once the button is clicked.

I need to change the size of the image container as its too wide for my image. However when I change the size of .ca-item it then means my ca-content-wrapper is too short! Even after I set ca-content to a larger width.

Any ideas?

I don't have anything online as working on local host but here is my css and the html is as the plugin original.

  1. /* Circular Content Carousel Style */
    .ca-container{
        position:relative;
        margin:25px auto 20px auto;
        width:855px;
        height:450px;
    }
    .ca-wrapper{
        width:100%;
        height:100%;
        display:block;
        position:relative;
    }
    .ca-item
    {
        position:relative;
        float:left;
        width:200px;
        height:100%;
        text-align:center;
    }
    .ca-item-main{
        /*padding:20px;*/
        position:absolute;
        width:200px;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background:#fff;
        overflow:hidden;
    }
    .ca-more
    {
        position: absolute;
        bottom: 10px;
        right:0px;
        padding:4px 15px;
        font-weight:bold;
        background: #ccbda2;
        text-align:center;
        color: white;
        font-family: "Georgia","Times New Roman",serif;
        font-style:italic;
        text-shadow:1px 1px 1px #897c63;
    }
    .ca-close
    {
        position:absolute;
        top:10px;
        right:10px;
        background:#fff url(../img/shop/redwine/cross.png) no-repeat center center;
        width:27px;
        height:27px;
        text-indent:-9000px;
        outline:none;
        -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
        -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
        box-shadow:1px 1px 2px rgba(0,0,0,0.2);
        opacity:0.7;
    }
    .ca-close:hover{
        opacity:1.0;
    }

    .ca-icon{
        width:104px;
        height:427px;
        position:relative;
        margin:0 auto;
        background:transparent url(../images/animal1.png) no-repeat center center;
    }

    .ca-content-wrapper{
        background:#b0ccc6;
        position:absolute;
        width:0; /* expands to width of the wrapper minus 1 element */
        height:440px;
        top:5px;
        text-align:left;
        z-index:10000;
        overflow:hidden;
    }
    .ca-content{
        width:595px;
        overflow:hidden;
        background:#f00;
        z-index:100;
    }

    .ca-nav span{
        width:25px;
        height:38px;
        background:transparent url(../img/shop/redwine/arrows.png) no-repeat top left;
        position:absolute;
        top:50%;
        margin-top:-19px;
        left:-40px;
        text-indent:-9000px;
        opacity:0.7;
        cursor:pointer;
        z-index:100;
    }
    .ca-nav span.ca-nav-next{
        background-position:top right;
        left:auto;
        right:-40px;
    }
    .ca-nav span:hover{
        opacity:1.0;
    }