开发者

jQuery-Cycle: border-radius property not acting as expected in Chrome 11

开发者 https://www.devze.com 2023-03-10 15:59 出处:网络
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, th

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

精彩评论

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