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.
- /* 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;
}