More than 5 Images in Slide Show

[jscheuer1]

Well the real trick would be to create a javascript, or better yet a PHP script that could create the styles and markup for you.

About rounded corners, on Beverley's demo:

img, #slider {border-radius: 25px; background: #eaeaea;}
#mask {border-radius: 30px; background: #eaeaea;}

The mask should be a higher border-radius than the img and slider I think, and their backgrounds should match the page background.

Oh, and you would want to shorten the progress bar and move it to the left a little:

.progress-bar { 
	position:relative;
	top:-5px;
	left: 13px;
	max-width:655px; 
	height:5px;
	backgro . . .

And in a stunning turn of events, adding the styles at the beginning of this post in an on page stylesheet in the head, caused Chrome to stop wanting to translate the page!

[johnwboyd]

Just as simple as adding the border width on the mask did the trick. : )

[Beverleyh]

And in a stunning turn of events, adding the styles at the beginning of this post in an on page stylesheet in the head, caused Chrome to stop wanting to translate the page!

Well I never...

That's progress for you

[jscheuer1]

Here's my latest:

http://home.comcast.net/~jscheuer1/s...der/demo10.htm

I used only generic css 3 and -webkit- css 3 properties. Includes curved corners via border-radius (css 3 only, no -webkit- or other proprietary -whatever- properties). Changed the length and left position of the progress bar to fit with the rounded corners, as well as its color and the color of the tooltips.

Issues:

• Still gets messed up in Opera after about two cycles.
  
  
• In Chrome and Opera, I can't seem to get the border radius to act like a crop during transitions (works well in IE and Firefox).
  
  
• In Chrome there's an annoying flicker on mouse out.