Nivo Slider - trying to alter shape of slideshow

Fanny Cradock

I'm currently messing around with the Nivo Slider (jquery) with the view of changing the shape of the slider. However, I've gotten a bit lost in the code.

What I want is to ditch the rectangular look of the slider and go with an ovate shape (like an almond). I figured that instead of reinventing the wheel, I could just overlay a transparent ovate image on top of the existing slider. I guess it would be analogous to placing a large sheet of paper with a ovate cut-out over a picture. Unfortunately my attempts to get this to work by creating a div to go over the existing divs interferes with the slider images by shifting them off their proper position.

I'm looking for any advice on how to alter this slider, or perhaps suggestions for other sliders (javascript?) that allow for easy customisation.

In conclusion, if you click the Nivo link you get a fairly standard rectangular slideshow. What I want is something more like this:

Giblet

If you can use CSS3, try Border-Radius.

Fanny Cradock

I haven't looked at CSS3 yet but I want this site compatible as many browsers as possible.

I have found a solution along the lines of what I was thinking. It was just a matter of creating a separate div and setting the z-index so it appears on top of the page. Not elegant but hopefully it will suffice.

BTW, have you any good sources for CSS3 and HTML 5?

tadcan

http://html5doctor.com/ is a good resource for HTML5. You can look at the http://www.w3.org/ for the actual specifications, but its not made to be non-techie friendly.

If you want to spend money then sitepoint have good books http://www.sitepoint.com/books/htmlcss1/