jQuery-Cycle: border-radius property not acting as expected in Chrome 11
Im using jQuery-cycle to power one of my slideshow and a border-radius prope开发者_JS百科rty applied to the container div is not working as expected: The "View Content" slide has rounded corners, the other slides dont have any.
#carousel {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
My cycle init code:
$('#carousel').cycle( {
speed: 400,
startingSlide: 1,
speedIn:null,
speedOut:null,
cleartype: false,
fit:1,
width:980,
delay: 0,
timeout:0,
fx: 'scrollHorz',
easing: 'swing',
easeIn:null,
easeOut:null,
prev: '#left',
next: '#right',
pager: '#pager',
pagerAnchorBuilder: function ( idx, slide ) {
return('<span><b>0'+slide.id+'</b> / 07</span>');
},
updateActivePagerLink: function(pager, activeIndex) {
if(activeIndex==0){
$('#navigation').hide();
$('#bottombar').css({'margin-top':'22px'});
}
else if(activeIndex==1){
$('#left').hide(); $('#right').show();
$('#bottombar').css({'margin-top':'540px'});
}
else if(activeIndex==7){
$('#left').show(); $('#right').hide();
$('#bottombar').css({'margin-top':'540px'});
}
else
{
$('#right').show();$('#left').show();
$('#bottombar').css({'margin-top':'540px'});
} $('#pager').find('span:eq('+activeIndex+')').addClass('activeSpan').siblings().removeClass('activeSpan');
}
});
Demo: http://rjwcollective.com/equinox/brochure/
You are actually getting round corners on your #carousel div (You can test this by adding a red border on #carousel). The reason you don't see it is because the images are absolutely positioned and do not have rounded corners.
If you want to show the rounded corners, you add this rule to your stylesheet:
.carousel_cont {
padding: 15px 0px;
}
精彩评论