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

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

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

Przykład online

Oczywiście do tego potrzebny jest jQuery

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

  • Share it on Twitter
  • Share it on Facebook
  • Share it on Pinterest
  • Share it on Google+
  • Share it on LinkedIn

Comments (2)Add comment

Take part in the discussion

Use pastebin.com or jsfiddle.net to add your code snippets
Your email address will not be published.