1

Im using jQuery-cycle to power one of my slideshow and a border-radius property 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/

frishi
  • 862
  • 1
  • 10
  • 27
  • Please describe what you expect and how the actual result differs from that. – Sparky Jun 06 '11 at 21:54
  • Hey Sparky, I am not getting rounded corners on the carousel container. On this example, http://rjwcollective.com/equinox/brochure/ click "view content" on the bottom left. That slide has rounded corners. Wonder what I am doing wrong. – frishi Jun 06 '11 at 21:57
  • You should post your HTML code too... the JavaScript you posted has little to do with the CSS of the DIV in question. – Sparky Jun 06 '11 at 22:04

1 Answers1

1

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;
}
kei
  • 20,157
  • 2
  • 35
  • 62