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:

72 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
  2. Excellent work! Thank you very much.

    ReplyDelete
  3. 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
  4. 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
  5. Great script, any chance you might add this to the recent 2.5.1 release which has some nice new transitions?

    Thanks

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

    ReplyDelete
  7. 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
  8. 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
  9. thanks very much, should of thought of that.. thank you so much for quick response!

    ReplyDelete
  10. 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
  11. I tried to use this in a joomla module, but only the right side is rounded.. ???

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

    ReplyDelete
  13. 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
  14. 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
  15. 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
  16. 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
  17. Updated to the latest version (v2.6). Works with the current latest version of jQuery (v1.6.2)

    ReplyDelete
  18. 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
  19. 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
  20. Awsome!

    /rockfashion.se

    ReplyDelete
  21. It is with one of the "sliceDown..." Array.

    ReplyDelete
  22. 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
  23. 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
  24. 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
  25. 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
  26. Thanks a million!! This is wonderful. :)

    ReplyDelete
  27. 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
  28. EofA, just search for all the "border-radius" in the js file and modify them according to your needs.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. 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
  31. EofA, did u change the first slider.css() line??

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

    ReplyDelete
  33. 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
  34. Awesome! Thanks for the help. After about another few hours of tweaking the code, I got it working perfectly.

    Frustration....gone.

    ReplyDelete
  35. 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
  36. Any chance I can only round the left side corners?

    ReplyDelete
  37. I love you for fixing this! <3

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

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

    ReplyDelete
  40. 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
  41. Interesting post. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    html5 converter

    ReplyDelete
  42. 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
  43. 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
  44. 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
  45. Works... Thanks a lot!

    ReplyDelete
  46. Awesome!! Thank you.

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

    ReplyDelete
  48. 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
  49. any suggestions to work well in Chrome?
    thanks a lot, anyway ;)

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

    ReplyDelete
  51. 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
  52. I'm having and issue with the rounded corners on google chrome with image not rounded.

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

    ReplyDelete
  54. 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
  55. Also not working for me in chrome. Works fine in all other browsers.

    Anyone have any suggestion?

    ReplyDelete
  56. thx babe great work

    ReplyDelete
  57. You have done an excellent job, Keep it up .Thanaks for sharing

    website for day traders http://www.intradaytips.com
    FOR MORE BLOG LIKE THIS http://intradaytipscom.blogspot.in

    Intraday tips for day traders. Our Nse tip work in 60 minute. for free trial visit: whttp://www.intradaytips.com
    or send sms TRIAL TO 56767 or TRIAL TO 98 70 80 1717

    ReplyDelete
  58. Hi at all.
    I cannot see the X on the right-top, but I only see the white square without the x inside.
    Any suggestions for this small problem ?
    thanks
    Eric

    ReplyDelete
  59. Hy, that’s what I was searching for, what a stuff! existing here at this webpage, thanks admin of this website.
    website design


    ReplyDelete

Thanks a lot for your valuable comments :)