jQuery Nivo Slider with CSS3 Round Corners

First things first, kudos to John O'Nolan for jQuery Nivo Slider. Great stuff! I was trying to use this slider on my website and wanted to use CSS3 round corners. Unfortunately I was not able to use round corners on the outer div because of the multiple slides overlapping over it. I tried many ways of achieving this using CSS but couldn’t find an optimal way to do it. Finally I modified the Nivo Sliders JavaScript library to include round corners without modifying the CSS file. I added a new option (borderRadius) which can be defined when the slider is initialized.

Demo on my Labs page

How to download and use this modified library:

1. Download and configure the library as described by the original developer: http://nivo.dev7studios.com/#usage
2. Get the new JavaScript file and use it instead of the original library file:
   
   • Version 2.4
   • Version 2.5.1
   • Version 2.6
   • Version 2.7.1
   • Version 3.0.1 (Latest version)
3. NO changes required in the CSS file.
4. Add new “borderRadius” option while initialization to define the border radius (default value is 10px).

Example usage:
$(window).load(function() {
    $('#slider').nivoSlider({ borderRadius: 20 });
});

Thanks once again to John for this awesome script. Keep up the good work.
Let me know if you find any bugs in the script and I’ll try to address them asap.

del.icio.us Tags: jQuery Nivo Slider