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.
How to download and use this modified library:
- Download and configure the library as described by the original developer: http://nivo.dev7studios.com/#usage
- 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)
- NO changes required in the CSS file.
- 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.
Thanks for this handy addition.
ReplyDeleteIs there any way to get this working with IE7+ in conjunction with a rounded corners script like css3PIE?
Awesome! Great job
ReplyDeleteThank You!
Excellent work! Thank you very much.
ReplyDeleteHi!
ReplyDeleteExcellent 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!
Answer to Anonymous' question regarding PIE.htc:
ReplyDeleteI 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!
Great script, any chance you might add this to the recent 2.5.1 release which has some nice new transitions?
ReplyDeleteThanks
UPDATED to the latest 2.5.1 version!
ReplyDeleteWith the new box transitions it was a difficult task but finally I conquered it :)
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:
ReplyDelete$(window).load(function() {
$('#slider').nivoSlider({ borderRadius: 20 });
effect:'fold',
animSpeed:300,
pauseTime:6000, // How long each slide will show
directionNav:false,
});
});
THANKS
Anonymous,
ReplyDeleteborderRadius 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)
thanks very much, should of thought of that.. thank you so much for quick response!
ReplyDeleteThanks 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.
ReplyDeleteI tried to use this in a joomla module, but only the right side is rounded.. ???
ReplyDeleteAnonymous,
ReplyDeleteCheck the rendered CSS using Firebug and see if any parent css is messing with the round corners.
On line 269 you add corners to the slices. Why not the same for the boxes @ line 322??
ReplyDelete//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'
});
can it use css 2?
ReplyDeleteWaaaw
ReplyDeletegood job mate
excellent
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.
ReplyDeleteThere error im getting is:
ReplyDeleteWebpage 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
This DONT WORKS with jQuery v1.6.x
ReplyDeleteThe 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!
Updated to the latest version (v2.6). Works with the current latest version of jQuery (v1.6.2)
ReplyDeleteDoesnt work.
ReplyDeletethank you :)
ReplyDeleteI'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.
ReplyDeleteIs 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.
ReplyDeleteAwsome!
ReplyDelete/rockfashion.se
It is with one of the "sliceDown..." Array.
ReplyDeleteOh, my last post did not sent as anonymous.
ReplyDeleteSo, 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)
sliceDown, do you see the same behavior on the Demo page: http://lab.abhinayrathore.com/nivo/???
ReplyDeleteBecause 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.
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.
ReplyDeleteI'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.
ReplyDeleteThanks a million!! This is wonderful. :)
ReplyDeleteLet 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?
ReplyDeleteEofA, just search for all the "border-radius" in the js file and modify them according to your needs.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteAnyone 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.
ReplyDeletePerhaps some code you might suggest?
EofA, did u change the first slider.css() line??
ReplyDeletechange it to what? I'm a jQuery noob.
ReplyDeleteEofA, 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 :)
ReplyDeleteAwesome! Thanks for the help. After about another few hours of tweaking the code, I got it working perfectly.
ReplyDeleteFrustration....gone.
i'm very new to jquery and css
ReplyDeletei 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
Any chance I can only round the left side corners?
ReplyDeleteI love you for fixing this! <3
ReplyDeletemany thanks! its working!
ReplyDeleteWhere exactly is this code supposed to within the .js file? At the end? The beginning? Within some other element?
ReplyDeleteEXACTLY WHAT I WAS LOOKING FOR - Has saved me a tonne of work.
ReplyDeleteThanks for that!!
I cant apply it only to one corner:(
ReplyDeleteI don't know if this would work, but try:
Delete.slider *{
border-top-left-radius: 0px !important;
}
That with all corners you want to give a 0 value.
No, it dowes not work.
DeleteInteresting post. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
ReplyDeletehtml5 converter
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:
ReplyDeleteslicesCreated: 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
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.
ReplyDeleteSo instead of borderRadius, you can set
- borderRadiusTopLeft (default 0)
- borderRadiusTopRight (default 0)
- borderRadiusBottomLeft (default 0)
- borderRadiusBottomRight (default 0)
Anyone interested: pixeopro@gmail.com
Hi,
ReplyDeleteJust 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
Works... Thanks a lot!
ReplyDeleteAwesome!! Thank you.
ReplyDeleteUpdated to v3.0.1!!!
ReplyDeleteThis is great! Thanks for the good work, sir.
ReplyDeleteit didn't work out for me, guys :/
ReplyDeletewhat I am doing wrong?
http://www.originalpilates.com.br/
It seems to be working in my browser!
Deletein fact, Abhinay, I tested now in internet explorer and it worked... but in Chrome...
Deleteany suggestions to work well in Chrome?
ReplyDeletethanks a lot, anyway ;)
Just wanted to say thanks! :) Saved my life on this one!
ReplyDeleteFabiano - 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.
ReplyDeleteI'm having and issue with the rounded corners on google chrome with image not rounded.
ReplyDeleteThe same problem like guys before.. please do sth with it.
ReplyDeleteMay be update to nivo 3.1 ?
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
ReplyDeleteValew!
ReplyDeleteAlso not working for me in chrome. Works fine in all other browsers.
ReplyDeleteAnyone have any suggestion?
Thanks a lot !
ReplyDeletethx babe great work
ReplyDeleteYou have done an excellent job, Keep it up .Thanaks for sharing
ReplyDeletewebsite 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
Hi at all.
ReplyDeleteI 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
Hy, that’s what I was searching for, what a stuff! existing here at this webpage, thanks admin of this website.
ReplyDeletewebsite design
Very useful post to know about CSS3, Thanks for the Demos in your blog. It looks very easy to understand the subject. AngularJS Training
ReplyDeleteGiven 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
ReplyDeleteThanks for Sharing this article and keep updating us regularly with a new set of articles. This article is more informatic.
ReplyDeleteAngularJS Training in Chennai | AngularJS Training Chennai | AngularJS Course in Chennai
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.
ReplyDeletejava training in chennai | java training institute in chennai | best angularjs 2 training in chennai | angularjs 2 training Course in chennai
Excellent post. I have learned lot of things from your site.
ReplyDeleteRegards,
AngularJS Training in Chennai | AngularJS course in Chennai
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
ReplyDeleteThanks 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.
ReplyDeleteAngularJS Training | AngularJS Training in Chennai
Excellent blog!! Such an interesting content to read, your idea made to take Web Designing Certifications. Keep updating more ideas. Thank you.
ReplyDeleteRegards:
Best web designing course in chennai
web designing course
Good Post....Nice One....Salesforce Training Online
ReplyDeleteExcellent post, Thanks for sharing this nice information, Please refer this for more information.Risk management consulting services
ReplyDeleteROI consultant minnesota
consulting company minnesota
I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
ReplyDeleteBest Java Training Institute Chennai