Слайдер NIVO с закругленными углами

Question

Пожалуйста, посетите мой сайт .

Если вы посмотрите на мой слайдер, вы обнаружите, что первый слайд идеален, но все остальные слайды имеют белые углы ТОЛЬКО внизу изображений.

Я не могу понять это!Сначала я решил эту проблему, обрезав срезы закругленными углами, но затем эффект перехода оставил изображение, выглядящее обрезанным срезами с закругленными углами.

Кто-нибудь может сделать здесь предложения?Это сводит меня с ума!

Answer 1

Похоже, проблема в элементах с атрибутом класса, установленным в "nivo-slice".Вероятно, этот фрагмент решит проблему:

.nivo-slice { 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    border-radius: 9px; 
    ... 
}

Answer 2

Этот измененный скрипт Nivo Slider - то, что вы можете искать: http://web3o.blogspot.com/2011/02/jquery-nivo-slider-with-css3-round.html

Answer 3

.nivoSlider {
    position:relative;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;     
}

Это может помочь.У меня работает!

Answer 4

Я нашел решение для этого, хотя оно требует небольшого компромисса с NivoSlider. Единственный способ заставить его работать, это сделать так, чтобы в слайдере был только 1 срез, в зависимости от вашей перспективы, которая может быть работоспособной или нет.

Тогда вы просто применяете border-radius к элементам nivo-slice и обертке слайдера, и вы должны быть в бизнесе. Это работало и с CSS3PIE, поэтому я смог обеспечить кросс-браузерную совместимость с ним.