Блог

Главная - Вопросы по программированию - jQuery-Cycle: свойство border-radius работает не так, как ожидалось в Chrome 11

jQuery-Cycle: свойство border-radius работает не так, как ожидалось в Chrome 11

#jquery #jquery-cycle #css

#jquery #jquery-cycle #css

Вопрос:

Я использую jQuery-cycle для запуска одного из моих слайд-шоу, и свойство border-radius, примененное к контейнерному div, работает не так, как ожидалось: слайд «Просмотр содержимого» имеет закругленные углы, на других слайдах их нет.

 #carousel  {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

Мой код инициализации цикла:

 $('#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'); 
                            }


});

Демонстрация:http://rjwcollective.com/equinox/brochure /

Комментарии:

1. Пожалуйста, опишите, чего вы ожидаете и чем фактический результат отличается от этого.

2. Эй, Спарки, я не получаю закругленные углы в контейнере carousel. В этом примере rjwcollective.com/equinox/brochure нажмите «просмотреть содержимое» в левом нижнем углу. У этого слайда закругленные углы. Интересно, что я делаю не так.

3. Вы также должны опубликовать свой HTML-код … JavaScript, который вы опубликовали, имеет мало общего с CSS рассматриваемого DIV.

Ответ №1:

На самом деле у вас получаются закругленные углы в вашем div #carousel (вы можете проверить это, добавив красную рамку в #carousel). Причина, по которой вы этого не видите, заключается в том, что изображения расположены абсолютно и не имеют закругленных углов.

Если вы хотите отобразить закругленные углы, добавьте это правило в свою таблицу стилей:

 .carousel_cont {
  padding: 15px 0px;
}