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:

148 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
  60. Very useful post to know about CSS3, Thanks for the Demos in your blog. It looks very easy to understand the subject. AngularJS Training

    ReplyDelete
  61. Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best Angularjs Training in Chennai|Angularjs Training in Chennai

    ReplyDelete
  62. Thanks for Sharing this article and keep updating us regularly with a new set of articles. This article is more informatic.
    AngularJS Training in Chennai | AngularJS Training Chennai | AngularJS Course in Chennai

    ReplyDelete
  63. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    java training in chennai | java training institute in chennai | best angularjs 2 training in chennai | angularjs 2 training Course in chennai

    ReplyDelete
  64. I went through your blog and it’s totally awesome. Keep on updating your site with such informative post. If possible please include rss feed for your blog. Web design training in Chennai | Web designing course in Chennai | Best web designing course in Chennai

    ReplyDelete
  65. Thanks for sharing this web page. Jquery Knowledge is necessary to build the web page. Your page has some useful information on Jquery. Continue sharing more like this.
    AngularJS Training | AngularJS Training in Chennai

    ReplyDelete
  66. Excellent blog!! Such an interesting content to read, your idea made to take Web Designing Certifications. Keep updating more ideas. Thank you.
    Regards:
    Best web designing course in chennai
    web designing course

    ReplyDelete
  67. Excellent post, Thanks for sharing this nice information, Please refer this for more information.Risk management consulting services
    ROI consultant minnesota
    consulting company minnesota

    ReplyDelete
  68. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

    Best Java Training Institute Chennai


    ReplyDelete
  69. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    Hadoop Training Institute In chennai

    amazon-web-services-training-institute-in-chennai

    ReplyDelete
  70. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    Best Python Training Institute in Bangalore

    ReplyDelete
  71. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

    https://bit.ly/2qI7TOC

    ReplyDelete
  72. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    datascience training in chennai

    ReplyDelete
  73. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    Hadoop Training in chennai

    ReplyDelete
  74. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    Best Python training Institute in chennai

    ReplyDelete
  75. I simply wanted to thank you so much again. I am not sure the things that I might have gone through without the type of hints revealed by you regarding that situation.
    Best selenium training Institute in chennai

    ReplyDelete
  76. Great post! Thanks for sharing with us, Its really gives lot of useful information.

    Angularjs Training in Chennai | Web Designing Training in Chennai

    ReplyDelete
  77. Thank you for an additional great post. Exactly where else could anybody get that kind of facts in this kind of a ideal way of writing? I have a presentation next week, and I’m around the appear for this kind of data.
    python training in chennai | python training in bangalore

    python online training | python training in pune

    python training in chennai | python training in bangalore

    python training in tambaram |

    ReplyDelete
  78. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.

    ReplyDelete
  79. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.

    MEAN stack training in Chennai
    MEAN stack training in bangalore
    MEAN stack training in tambaram
    MEAN stack training in annanagar

    ReplyDelete
  80. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune
    Data science training in kalyan nagar
    selenium training in chennai

    ReplyDelete
  81. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    Devops Training in Chennai

    Devops Training in Bangalore

    ReplyDelete
  82. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.

    rpa training in Chennai | rpa training in pune

    rpa training in tambaram | rpa training in sholinganallur

    rpa training in Chennai | rpa training in velachery

    rpa online training | rpa training in bangalore

    ReplyDelete
  83. Great thoughts you got there, believe I may possibly try just some of it throughout my daily life.
    Python training in marathahalli
    Python training in pune
    AWS Training in chennai

    ReplyDelete
  84. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command
    Python training in marathahalli
    Python training in pune
    AWS Training in chennai

    ReplyDelete
  85. mytectra placement Portal is a Web based portal brings Potentials Employers and myTectra Candidates on a common platform for placement assistance.

    ReplyDelete
  86. The site was so nice, I found out about a lot of great things. I like the way you make your blog posts. Keep up the good work and may you gain success in the long run.
    Python training in marathahalli
    Python training in pune
    AWS Training in chennai

    ReplyDelete
  87. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    DevOps online Training

    ReplyDelete
  88. At this time, it seems like Word Press is the preferred blogging platform available right now. (from what I’ve read) Is that what you’re using on your blog? Great post, however, I was wondering if you could write a little more on this subject?
    Best AWS Training in Marathahalli | AWS Training in Marathahalli
    Amazon Web Services Training in Anna Nagar, Chennai |Best AWS Training in Anna Nagar, Chennai

    ReplyDelete
  89. Thank you so much for a well written, easy to understand article on this. It can get really confusing when trying to explain it – but you did a great job. Thank you!
    Data Science course in rajaji nagar | Data Science with Python course in chenni
    Data Science course in electronic city | Data Science course in USA
    Data science course in pune | Data science course in kalyan nagar

    ReplyDelete

  90. Howdy, would you mind letting me know which web host you’re utilizing? I’ve loaded your blog in 3 completely different web browsers, and I must say this blog loads a lot quicker than most. Can you suggest a good internet hosting provider at a reasonable price?
    Amazon Web Services Training in OMR , Chennai | Best AWS Training in OMR,Chennai
    Amazon Web Services Training in Tambaram, Chennai|Best AWS Training in Tambaram, Chennai

    ReplyDelete
  91. I am so proud of you and your efforts and work make me realize that anything can be done with patience and sincerity. Well I am here to say that your work has inspired me without a doubt.
    angularjs Training in bangalore

    angularjs Training in bangalore

    angularjs Training in btm

    angularjs Training in electronic-city

    angularjs online Training

    ReplyDelete
  92. Thank you for sharing such great information with us. I really appreciate everything that you’ve done here and am glad to know that you really care about the world that we live in.
    SEO Training in Chennai
    SEO Training Center in Chennai
    SEO Institutes in Chennai
    SEO Course Chennai
    SEO Training near me

    ReplyDelete
  93. Excellent tutorial buddy. Directly I saw your blog and way of teaching was perfect, Waiting for your next tutorial.
    best rpa training institute in chennai | rpa training in velachery | rpa training in chennai omr

    ReplyDelete
  94. Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

    DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

    Good to learn about DevOps at this time.


    devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai

    ReplyDelete
  95. You have provided a nice article, Thank you very much for this. I hope this will be useful for many people. Please keep on updating these type of blogs with good content.Thank You...
    aws online training
    aws training in hyderabad
    aws online training in hyderabad

    ReplyDelete
  96. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here.
    safety course in chennai

    ReplyDelete
  97. Excellent tutorial buddy. Directly I saw your blog and way of teaching was perfect, Waiting for your next tutorial.

    Nice article on blue prism training in chennaiwith excellent way of approach. Your post was really helpful.Thanks for Sharing this nice info Blueprism. Keep Sharing such a wonderful information and keep updating.
    Thanks and regards,
    Best Blue prism training in chennai

    ReplyDelete
  98. The blog which you are shared is very much helpful for us to knew about the web designing. thanks for your information.
    Web Designing Institute
    Best Web Design Courses
    Web Design Training Courses
    Learn Website Design
    Best Way to Learn Web Design

    ReplyDelete
  99. Nice post. I learned some new information. Thanks for sharing.

    Education
    Technology

    ReplyDelete
  100. your blog informations are really creative and It contains full of new innovative ideas.
    thank you for sharing with us.please update more data.
    Salesforce Courses in T nagar
    Salesforce Training Institutes in T nagar
    Salesforce Course in Anna Nagar
    Best Salesforce Training Institute in Anna nagar

    ReplyDelete
  101. Very Informative article you have described everything in a brilliant way. This is really useful article for begginer learner. Appreciated!

    Cloud Training
    Cloud Training in Chennai

    ReplyDelete
  102. Thanks for your sharing such a useful information. this was really helpful to me.

    Guest posting sites
    Education

    ReplyDelete
  103. Wonderful information, thanks a lot for sharing kind of information. Your website gives the best and the most interesting information. Thanks a ton once again

    Angular JS Training in Chennai
    React Training
    Node JS Training

    ReplyDelete

Thanks a lot for your valuable comments :)