Saturday, February 26, 2011

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:
  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:
Posted by at

68 comments:

  1. Thanks for this handy addition.

    Is there any way to get this working with IE7+ in conjunction with a rounded corners script like css3PIE?

    ReplyDelete

  3. Excellent work! Thank you very much.

    ReplyDelete

  4. Hi!
    Excellent work!
    But, I can't get it working.
    Take a look here please.
    Just downloaded this version of jquery.nivo.slider and replace with the old one, added the "borderradiuos" option in my page, but it's not working.
    Could you please tell me what I can do?
    Thanks!

    ReplyDelete

  5. Answer to Anonymous' question regarding PIE.htc:

    I changed the following code in nivo-slider.css:

    .nivoSlider {
    position:relative;
    behavior: url(PIE.htc);
    -pie-watch-ancestors: 1;
    }

    I tested it with IE7 and IE8.

    And thanks to Abhinay for the Round Corner-Script!

    ReplyDelete

  6. Great script, any chance you might add this to the recent 2.5.1 release which has some nice new transitions?

    Thanks

    ReplyDelete

  7. UPDATED to the latest 2.5.1 version!
    With the new box transitions it was a difficult task but finally I conquered it :)

    ReplyDelete

  8. Thank you, great feature. Only problem, being very bad with jquery, I can't figure out how to add the script to tune effects, anim speed.. after the borderRadius script. Can someone tell me how to incoporate the configuration? I tried this , does not work:


    $(window).load(function() {
    $('#slider').nivoSlider({ borderRadius: 20 });
    effect:'fold',
    animSpeed:300,
    pauseTime:6000, // How long each slide will show
    directionNav:false,
    });
    });


    THANKS

    ReplyDelete

  9. Anonymous,
    borderRadius is just another configuration option, so use it with others like this:

    $('#slider').nivoSlider({
    borderRadius: 20,
    effect:'fold',
    animSpeed:300,
    pauseTime:6000,
    directionNav:false //notice no comma after last option
    });

    And all the timings are in milliseconds so 6000ms = 6sec (1000 milliseconds in one second)

    ReplyDelete

  10. thanks very much, should of thought of that.. thank you so much for quick response!

    ReplyDelete

  11. Thanks a lot for the fix, works well here. Also, there is a new version (2.5.3) of Nivo Slider in case you want to update your version of it.

    ReplyDelete

  12. I tried to use this in a joomla module, but only the right side is rounded.. ???

    ReplyDelete

  13. Anonymous,
    Check the rendered CSS using Firebug and see if any parent css is messing with the round corners.

    ReplyDelete

  14. On line 269 you add corners to the slices. Why not the same for the boxes @ line 322??

    //add rounded corners on boxes
    var nrTopRght = settings.boxCols -1;
    var nrBtmLeft = (settings.boxRows -1) * settings.boxCols;

    var topLeftBox = $('.nivo-box:first');
    var topRightBox = $('.nivo-box:eq(' + nrTopRght + ')');
    var bottomLeftBox = $('.nivo-box:eq(' + nrBtmLeft + ')');
    var bottomRightBox = $('.nivo-box:last');

    topLeftBox.css({
    '-webkit-border-top-left-radius': settings.borderRadius + 'px',
    '-moz-border-radius-topleft': settings.borderRadius + 'px',
    'border-top-left-radius': settings.borderRadius + 'px',
    });

    bottomLeftBox.css({
    '-webkit-border-bottom-left-radius': settings.borderRadius + 'px',
    '-moz-border-radius-bottomleft': settings.borderRadius + 'px',
    'border-bottom-left-radius': settings.borderRadius + 'px'
    });

    topRightBox.css({
    '-webkit-border-top-right-radius': settings.borderRadius + 'px',
    '-moz-border-radius-topright': settings.borderRadius + 'px',
    'border-top-right-radius': settings.borderRadius + 'px',
    });

    bottomRightBox.css({
    '-webkit-border-bottom-right-radius': settings.borderRadius + 'px',
    '-moz-border-radius-bottomright': settings.borderRadius + 'px',
    'border-bottom-right-radius': settings.borderRadius + 'px'
    });

    ReplyDelete

  17. Doesn't seem to work. Even tried it with the demo that comes with Nivo. It works fine with the original script but as soon as I switch it with this one the slider breaks and it just becomes a static image.

    ReplyDelete

  18. There error im getting is:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
    Timestamp: Sat, 23 Jul 2011 06:57:58 UTC


    Message: 'undefined' is null or not an object
    Line: 98
    Char: 5
    Code: 0
    URI: file: jquery.nivo.slider.2.5.1.js

    ReplyDelete

  19. This DONT WORKS with jQuery v1.6.x
    The original was fixed to work, but this modified version dont works.
    Can you share what have you modified for round corners, so we can modify the new version?
    thanks!

    ReplyDelete

  20. Updated to the latest version (v2.6). Works with the current latest version of jQuery (v1.6.2)

    ReplyDelete

  23. I'm having and issue with the rounded corners on IE8. I added behavior: url(css/PIE.htc) and -pie-watch-ancestors: 1; but it's doesn't seem to work.

    ReplyDelete

  24. Is it possible to still have a border around the images? I want to have the rounded corners but with a 2 pixel border as well.

    ReplyDelete

  25. Awsome!

    /rockfashion.se

    ReplyDelete

  26. It is with one of the "sliceDown..." Array.

    ReplyDelete

  27. Oh, my last post did not sent as anonymous.
    So, it is great job, Thanks!
    Although it breaks off some of the sliding effect strange even with the newest 1.6.4 jQuery or any older ones like 1.6.2 or 1.5.1.
    (tested on w7/64 with the latest chrome and ie)

    ReplyDelete

  28. sliceDown, do you see the same behavior on the Demo page: http://lab.abhinayrathore.com/nivo/???
    Because on my side, the demo page seems to be working fine. If it's breaking on your page, then I'd suggest debugging the CSS using firebug as there might be some other CSS code interfering with the Nivo slider.

    ReplyDelete

  29. I'm having and issue with the rounded corners on IE8. I added behavior: url(css/PIE.htc) and -pie-watch-ancestors: 1; but it's doesn't seem to work.

    ReplyDelete

  30. I'm having and issue with the rounded corners on IE8. I added behavior: url(css/PIE.htc) and -pie-watch-ancestors: 1; but it's doesn't seem to work.

    ReplyDelete

  31. Thanks a million!! This is wonderful. :)

    ReplyDelete

  32. Let say you only wanted the top-right and the bottom right to have a radius on them. Would I just comment out the top-left and bottom left?

    ReplyDelete

  33. EofA, just search for all the "border-radius" in the js file and modify them according to your needs.

    ReplyDelete

  34. This comment has been removed by the author.

    ReplyDelete

  35. Anyone have any suggestions on how to only have the top right and bottom right corners rounded? I've tried deleting all references to "left" border radius in the 2.6.js file, but still no luck.

    Perhaps some code you might suggest?

    ReplyDelete

  36. EofA, did u change the first slider.css() line??

    ReplyDelete

  37. change it to what? I'm a jQuery noob.

    ReplyDelete

  38. EofA, I don't have enough time to help you with this but try this... wherever you find -webkit-border-radius, -moz-border-radius and border-radius in the code, remove them and only add the corners you want to make round. I hope it works. In the next release I'll include the option to select the corners you wanna make rounded, but that will take some time :)

    ReplyDelete

  39. Awesome! Thanks for the help. After about another few hours of tweaking the code, I got it working perfectly.

    Frustration....gone.

    ReplyDelete

  40. i'm very new to jquery and css
    i put the code in "jquery.nivo.slider.js"
    just the end of file after (jQuery);
    i really don't know how to edit this file
    or i have to edit other files???
    i use nivo slider 2.7 and jquery v1.6.4
    Please help, thank you very very much

    ReplyDelete

  41. Any chance I can only round the left side corners?

    ReplyDelete

  42. I love you for fixing this! <3

    ReplyDelete

  44. Where exactly is this code supposed to within the .js file? At the end? The beginning? Within some other element?

    ReplyDelete

  45. EXACTLY WHAT I WAS LOOKING FOR - Has saved me a tonne of work.
    Thanks for that!!

    ReplyDelete

  46. I cant apply it only to one corner:(

    ReplyDelete
    Replies

    1. I don't know if this would work, but try:

      .slider *{
      border-top-left-radius: 0px !important;
      }

      That with all corners you want to give a 0 value.

      Delete

    2. No, it dowes not work.

      Delete

  47. Interesting post. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    html5 converter

    ReplyDelete

  48. It works but personally I'd prefer that only a few changes should be adjusted to the nivo library. My alternative solution would be to add 2 new callbacks to Nivo:

    slicesCreated: function(cols) { },
    boxesCreated: function(cols) { }

    The edits to the library would be to add these two arguments/functions as defaults, then to add the appropriate callbacks to the end of the Nivo's internal functions createSlices(...) and createBoxes(...).

    You can then just create functions that manipulate the slices/boxes directly just before they get shown in the screen, e.g. adding a css class to the first slice to get right border-radius

    ReplyDelete

  49. I modified the 2.7.1 script to use 4 parameters for the 4 corners instead of just 1 global value. It's just a minor alteration to this existing script but it does let you choose different values for the 4 corners.

    So instead of borderRadius, you can set
    - borderRadiusTopLeft (default 0)
    - borderRadiusTopRight (default 0)
    - borderRadiusBottomLeft (default 0)
    - borderRadiusBottomRight (default 0)

    Anyone interested: pixeopro@gmail.com

    ReplyDelete

  50. Hi,

    Just what we needed, but I tried it on http://dev.uk-audis.net/ and it made the caption on the right lose its opacity, any idea why

    cheers
    Dave

    ReplyDelete

  51. Works... Thanks a lot!

    ReplyDelete

  52. Awesome!! Thank you.

    ReplyDelete

  54. This is great! Thanks for the good work, sir.

    ReplyDelete

  55. it didn't work out for me, guys :/
    what I am doing wrong?

    http://www.originalpilates.com.br/

    ReplyDelete
    Replies

    1. It seems to be working in my browser!

      Delete

    2. in fact, Abhinay, I tested now in internet explorer and it worked... but in Chrome...

      Delete

  56. any suggestions to work well in Chrome?
    thanks a lot, anyway ;)

    ReplyDelete

  57. Just wanted to say thanks! :) Saved my life on this one!

    ReplyDelete

  58. Fabiano - Did you ever get the rounded corners to work in Chrome? For me it works with the first slide. That has rounded corners but the slides that follow it do not. However while they are transitioning to the next slide you can see that the slide in the background has rounded corners.

    ReplyDelete

  59. I'm having and issue with the rounded corners on google chrome with image not rounded.

    ReplyDelete

  60. The same problem like guys before.. please do sth with it.
    May be update to nivo 3.1 ?

    ReplyDelete

  61. I've tried installing it a few times recently because of the problem that it keeps on spinning and doesn't load any image, they said it must be the update of the javascript/jquery that causes the problem. Now I made it working using the code that I got from a blogspot widget tutorial, I can't remember the site but you can at least check my blog to see it. thetonerexpert.blogspot.com

    ReplyDelete

  63. Also not working for me in chrome. Works fine in all other browsers.

    Anyone have any suggestion?

    ReplyDelete

Thanks a lot for your valuable comments :)

Subscribe to: Post Comments (Atom)