More than 5 Images in Slide Show

[johnwboyd]

How to have 10 frames (images) vs 5 in this slide show. I've tried everything and can't seem to make it work:

http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/comment-page-1/#4

[jscheuer1]

Mmm, this doesn't work in IE 10 or Opera, so I'm not sure it's worth pursuing.

My advice would be to follow the step by step instructions, there are several or more calculations which must be made in order to arrive at the CSS 3 styles for both the animation and the progress bar, possibly for other things as well. These all appear to be dependent upon the number of slides involved. Use Calculator if the math is too hard to do in your head.

[johnwboyd]

Yeah I'm no math guru or detective so I guess I gotta wait for someone to crack this...

[jscheuer1]

I was about to pass on this because it's not cross browser. But after looking at the css I saw that only -moz- and -webkit- styles were used for the css 3 animations. I decided that it would be worth trying generic css 3 styles in IE 10, and voila! It worked. It even sort of worked in Opera, but after one rotation things got out of whack.

So I may have a closer look at this.

But you may have sold yourself short. All it should take to add more images is to follow the instructions.

[Beverleyh]

Yes, the instructions are the way to go and its quite simple once you understand keyframes (divided over a 100% duration). What makes this task a bit easier is that you're doubling the image quantity, so similarly, you can expect to apply either a halving or doubling logic to any of the provided values.

So, the first things to do is to create the markup for those extra frames. Do that in your html, and sequentially increase the id/class accordingly (sixth, seventh, eighth, etc.) That's the easy part.

Next, head over to the "styles.css" file and also check the part of the tutorial which references the calculations;

1. Define the total number of images to use in the slider
5
2. Define the length of animation for each image
5 seconds
3. Define the total duration of the animation
Multiply the total number of images by the duration of each image:
5 images × 5 seconds = 25 seconds
4. Calculate how many keyframes equals one second
Divide the total number of keyframes by the total duration of the animation.
100 keyframes / 25 seconds = 4 keyframes
4 keyframes = 1 second

Substitute in your changes;

1. Define the total number of images to use in the slider
10
2. Define the length of animation for each image
5 seconds
3. Define the total duration of the animation
Multiply the total number of images by the duration of each image:
10 images × 5 seconds = 50 seconds
4. Calculate how many keyframes equals one second
Divide the total number of keyframes by the total duration of the animation.
100 keyframes / 50 seconds = 2 keyframes
2 keyframes = 1 second

What we can see is that the total animation duration has increased from 25s to 50s (makes sense, as you've doubled the amount of images), so now open your "styles.css" file and increase the animation sequences from 25s to 50s - those are the lines that look like this;

#slider li.firstanimation {
	-moz-animation:cycle 50s linear infinite;	
	-webkit-animation:cycle 50s linear infinite;			
}

Do that for all the #slider li.firstanimation, #slider li.secondanimation, #slider li.thirdanimation, #slider li.fourthanimation, etc. definitions, right up to and including the ones you will add for #slider li.tenthanimation

Now head over to the "animation.css" file. Look at the % values for the 5 animations slides and you can see that overall, their total animation spans 100% (ie, a full slideshow cycle), while the animation for each slide spans approximately a 5th or 20% of the total time - most of the animation for slide 1 happens between 0% and 20%, most of the animation for slide 2 happens between 20% and 40% and most of the animation for slide 3 happens between 40% and 60%, etc.

Now, we already know that the quantity of slides has doubled from 5 to 10, so in effect, the animation for each slides needs to be halved to make room for the extra 5 slides, so the changes that we make (corresponding to the new keyframe value of 2 frames per second instead of 4 frames per second) can easily be done by halving (most of) the percentages within the total keyframes boundary of 0% and 100%. So this;

@-moz-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; } /* just a 1% tickover to change z-index quickly */
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
}

Would become this;

@-moz-keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; }
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; }
	11% { top:-325px; opacity:0; z-index:-1; } /* just a 1% tickover to change z-index quickly */
	25% { top:-325px; opacity:0; z-index:-1; }
	96% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }	
}

Conveniently, when you transpose this logic on to the remaining 4 original slides, and then add in the extras up to 10 slides, you can work in sequential values of 10 - the CSS for slides 2 to 9 are identical apart from the animation percentages - do you see the emerging pattern?;

@-moz-keyframes cycle {
	0%  { top:0px; }
	2%  { top:0px; }
	8% { top:0px; opacity:1; z-index:0; } 
	10% { top:325px; opacity:0; z-index:0; }
	11% { top:-325px; opacity:0; z-index:-1; }
	25% { top:-325px; opacity:0; z-index:-1; }
	96% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }	
}
@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	8% { top:-325px; opacity:0; }
	10% { top:0px; opacity:1; }
	12% { top:0px; opacity:1; } 
	18% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }  
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	18% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	22% { top:0px; opacity:1; } 
	28% { top:0px; opacity:1; z-index:0; } 
	30% { top:325px; opacity:0; z-index:0; } 
	31% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	28% { top:-325px; opacity:0; }
	30% { top:0px; opacity:1; }
	32% { top:0px; opacity:1; }
	38% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	38% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	42% { top:0px; opacity:1; }
	48% { top:0px; opacity:1; z-index:0; }
	50% { top:325px; opacity:0; z-index:0; }
	51% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	48% { top:-325px; opacity:0; }
	50% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	58% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cycleseven {
	0%  { top:-325px; opacity:0; }
	58% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	62% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; z-index:0; }
	70% { top:325px; opacity:0; z-index:0; }
	71% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cycleeight {
	0%  { top:-325px; opacity:0; }
	68% { top:-325px; opacity:0; }
	70% { top:0px; opacity:1; }
	72% { top:0px; opacity:1; }
	78% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclenine {
	0%  { top:-325px; opacity:0; }
	78% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	82% { top:0px; opacity:1; }
	88% { top:0px; opacity:1; z-index:0; }
	90% { top:325px; opacity:0; z-index:0; }
	91% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cycleten {
	0%  { top:-325px; opacity:0; }
	88% { top:-325px; opacity:0; }
	90% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; }
	98% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

The only real difference is with slide 1 which, as outlined in the tutorial, needs extra keyframes (I put those in grey higher up this post) to make it ready for the second cycle without creating an obvious jump. The changes with these are based on there now being 2 keyframes per second instead of 4, so that why this;

	96% { top:-325px; opacity:0; z-index:0; }
	98% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }

now only needs to jump up in 2% increments on the last 2 lines, instead of the original CSS which jumped up in 4% increments;

	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }

That's it for tackling the animation sequences. Now all that's left to do is duplicate ALL the CSS with vendor prefixes for Opera, and no vendor prefix for IE - something like this;

@-o-keyframes cycle { 
/* styles for Opera */
}

@keyframes cycle { 
/* styles for IE */
}

But follow the patterns, and make all necessary changes, in both the "styles.css" file and "animation.css" file.

And the final result is this: http://fofwebdesign.co.uk/template/_...how/index.html

[jscheuer1]

Yes, except Opera doesn't need Opera (-o-) specific styles, and Firefox doesn't need Moz (-moz-) specific styles. The generic ones are good for both of those and IE (supporting versions), which could probably use MS (-ms-) specific styles don't need those. And Opera still gets out of whack up after one or two full rotations.

The browser specific (-webkit-) styles are only required for Chrome and (presumably) Safari, which apparently haven't 'graduated' to the generic css 3 styles for these properties yet.

Older Firefox and other older Mozilla may still need -moz- and older Opera the -o-, but current versions do not.

[Beverleyh]

I'm a little more outdated on Firefox and Opera than you are John

I now see that current Opera, Safari and Chrome use -webkit-, while current IE and Firefox use no prefix.

There's a neat little website here for checking CSS3 compatibility: http://caniuse.com/#search=keyframes
I popped in a search for keyframes (CSS3 Animation) and hey presto, all the vendor prefix info you need.

Click the "Show all versions" link on the left for recent update. Its interesting to see how things got a bit hairy with Opera for a while - its jumped from -o- to nothing to -webkit- on the last 3 updates.

I just read something about using -moz- for support on Firefox? in Android but, damn and blast, I cant find the web page again now! Either way, I don't suppose there's much of a market for -moz- now anyway so feel free to scrub that vendor prefix.

[jscheuer1]

Old Android with old Firefox/Mozilla I would think. I believe Android uses webkit (Safari) by default.

I'm not much up on mobiles though I suspect that much of the css 3 information for them and desktops on the web was either originally overkill and/or now out of date.

These extra styles don't appear to hurt anything though.

Now, Opera and -webkit-, from looking at Opera's developer tools, it appears to be using some -webkit- styles, but not these. But it will use the generic ones. Nevertheless it still messes up after a rotation or two, the timing gets off or something.

And I should ask what brand of coffee you're drinking, I was still fumbling around with a stopwatch, but I think I was close to getting those values setup.

And one real strange thing about your demo in Chrome - it wants to translate it from the Tagalog language (a native language of the Philippines), but of course it has no such characters in it. If I remove some of the markup, it stops, but of course that also messes up the show. And I see no rhyme or reason to it. The markup that needs to be removed seems optional, various ones (li's) will work, and blank lines seem to play a role, but not in any consistent fashion. For now, looks like a bug in Chrome to me, perhaps somehow linked to the css in an obscure way.

Even after I copied it, reorganized the styles (as per my last post and to use the full panoply, including reset and custom fonts from the original demo) and used my own images, it was still doing that.

[johnwboyd]

Thank you sooo much Beverleyh. This really had me stumped. I'll drop this link on that site for others who were asking about this issue.
I do have one question remaining though and that's how to get the images themselves to have rounded corners. The mask or whatever it is has rounded but the images are sharp cornered: http://clubrazzberry.com

[Beverleyh]

You got that Chrome translate thing too? I thought that was just me and the wacky Firewalls in work. LOL. Needless to say I just elbowed it into the ether without so much as a second thought. I didn't realise that the markup was playing silly-beggars.

Its a funny one with Opera - I don't use CSS3 transitions a great deal (apart from really small flourishes when it doesn't really matter if they don't show up) so I didn't study it too closely after a full rotation. Chrome and IE10 are my usual playground and they, as we've already surmised, worked fine.

As for the math(s) [<--- extra "s" for the Brits!] it was only once I'd halved the values in the first 2 slides that I saw the pattern and then I happily skipped along with the increments of 10. I like to think that I had extra help though - I'm wearing sandals today so... 5 into 100 includes toes... and 10 into 100 uses fingers only, tee, hee

I think from all of this though, I've come to the conclusion that a JavaScript alternative would probably be the way to go until things become more standardised in browsers across the board.