开发者

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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜