Nivo Slider – zaokrąglone rogi z CSS3 i jQuery

Mój web designer ubóstwia zaokrąglone rogi. Mam na myśli, naprawdę naprawdę uwielbia. Wszystko byłoby w porządku gdyby ustawienie tego było proste. Do tej pory wydawało mi się, że jest.

Rozwiązanie działa dla Nivo Slider w wersji 2.3

Żeby uzyskać zaokrąglone rogi należy dodać do reguły deklaracje jak poniżej

{
  border-radius:5px; 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px;
}

W ten sposób mamy wszystkie 4 rogi zaokrąglone. Oczywiście należy pamiętać że w IE8 i niższych nie zobaczymy tego efektu.

Używając Nivo Slider okazało się, że prosta deklaracja jak border:radius to za mało. Zaokrąglone rogi były widoczne na początku, ale potem znikały. Próbowałam z #slider img, a itd., ale nic nie działało. Potem przyjrzałam się jak slider działa i co dokładnie wyświetla i wpadłam na (tak mi się wydaje) proste rozwiązanie. Zasadniczo slider pokazuje wycinki obrazka “sklejone” ze sobą, a nie orginalny obrazek. I to jest to.

Tak więc panie i panowie, moje rozwiązanie dla tego problemu to:

» Dodać do skryptu funkcję afterLoad jak poniżej

$('#slider').nivoSlider({
  [inne opcje jeśli są]
  afterLoad: ( function(){

   //round top left corner and bottom left corner of first slice
    $('.nivo-slice').first().css({
      '-webkit-border-bottom-left-radius': '5px', 
      '-webkit-border-top-left-radius': '5px', 
      '-moz-border-radius-bottomleft': '5px', 
      '-moz-border-radius-topleft': '5px', 
      'border-bottom-left-radius': '5px', 
      'border-top-left-radius': '5px'
    });
   
   //round top right corner and bottom right corner of lastslice
    $('.nivo-slice').last().css({
      '-webkit-border-bottom-right-radius': '5px', 
      '-webkit-border-top-right-radius': '5px', 
      '-moz-border-radius-bottomright': '5px', 
      '-moz-border-radius-topright': '5px', 
      'border-bottom-right-radius': '5px', 
      'border-top-right-radius': '5px'
    });
  })
});

» Dodać deklarację css do klasy .nivoSlider i img jak poniżej

.nivoSlider,.nivoSlider img{
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

Przykład online

Oczywiście do tego potrzebny jest jQuery

Rozwiązanie działa dla Nivo Slider w wersji 2.3