Революционный слайдер - закругленные углы

Question

У меня есть движок Slider на Wordpress CMS. Я внедрил пользовательский css на панели слайдера Revolution. Когда вы сначала загружаете страницу, ползунок закругляется в верхнем левом и нижнем правом углу, но при изменении размера окна (немного) закругленные углы исчезают! Я не могу найти виновника, отзывчивость должна продолжать работать с пользовательским css, но это не так. Спасибо за любую помощь. https://www.superherodigital.com/livescan/

Код, который я использую.

-webkit-border-top-left-radius: 50px; 
-webkit-border-top-right-radius: 0; 
-webkit-border-bottom-right-radius: 50px; 
-webkit-border-bottom-left-radius: 0; 
-moz-border-radius-topleft: 50px; 
-moz-border-radius-topright: 0; 
-moz-border-radius-bottomright: 50px; 
-moz-border-radius-bottomleft: 0; 

Answer 1

Это, вероятно, что-то сделать с помощью ползунка объявляя свойства CSS в JS (динамически изменяющиеся свойства DOM), удаляя любые примененные стили в таблице стилей. Я вижу, что вы применяете эти объявления на #rev_slider_1_1_wrapper.

Я бы добавил класс к этому вместо этого и применил радиус границы к новому классу.

.rev-slider-border-radius { 
    -webkit-border-top-left-radius: 50px; 
    -webkit-border-top-right-radius: 0; 
    -webkit-border-bottom-right-radius: 50px; 
    -webkit-border-bottom-left-radius: 0; 
    -moz-border-radius-topleft: 50px; 
    -moz-border-radius-topright: 0; 
    -moz-border-radius-bottomright: 50px; 
    -moz-border-radius-bottomleft: 0; 
} 

Затем добавить класс к элементу слайдер обертки если это в вашем HTML:

<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div> 

Или, если JS порождает это, применять класс с помощью JS после в ползунок был инициализирован:

$(function() { 
    $('.rev_slider_wrapper').addClass('rev-slider-border-radius'); 
}); 

Answer 2

Вы можете добавить обертку вокруг ползунка с ползунком вращения класс roundedslider где класс roundedslider имеет следующий стиль атрибуты:

.roundedslider {

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
position: relative; 
z-index: 1; 
overflow: hidden; 

}

Это отлично работает в примере здесь также: http://revolution.themepunch.com/home-slider-boxed/

Все другие вопросы о ThemePunch на продукты отвечают http://themepunch.com/support-center

Надеюсь, это поможет вам?

Answer 3

Для меня это работает нормально, просто замените бегунок и радиус вы любите по углам:

.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli 
{ 
-webkit-border-radius: 8px !important; 
-moz-border-radius: 8px !important; 
border-radius: 8px !important; 
}