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/_testing/css3-slideshow/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 :D

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.

[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/side/demos/tidbits/css3slider/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.

[aden]

I think I see how you are doing this, but I am trying to make the image number 4 and am having a very difficult time figuring out how to make it work. I have deleted cyclefive in all the places I could find but still have a blank spot show up with the progress bar on it's own. I thought maybe there is a progress bar fifth cycle so to speak and attempted to modify those numbers and rows of number and just broke it. Can you help me? Thanks!!

[grmccray]

Hi Beverly,
I appreciate your input here, I already built a 5 slide show for my dronesarefun.com websites home page from the original instructions, but figuring out how to modify it adequately for a six slide show defeated me until I found your instructions for a 10 slide show mod.
Of course, one thing that is immediately apparent is that these instructions work very well for a 10 slide show but calculating appropriate offsets for anything between a 5 and a 10 slide one is a bit trickier.
For one thing we are dealing in whole decimal values without decimal points and the divisions do not produce whole values.
So you need to interpolate to the nearest whole value.
And any errors that you make are cumulative and end up at the very end of the slide show where it wraps back to the start.
All that said I was able to approximate offsets and ended up with a very adequate 6 slide show with only a tiny bit of misalignment on the final wrap back to the start (which I will still try to finesse out of it).
I also need to make a 7 slide show, but I think except for the primary alignment offset (currently 10 for 6 slides) which will need to be reduced further, I will be able to leave the other offsets the same (3 and 1).
I wouldn't have been able to get this far without your help, I try to avoid Javascript whenever possible due to users often having Java incompatibilities and this CSS3 slide show certainly shows a very powerful instance of being able to get along without it.
Best Regards,
Gary:)

[grmccray]

Hi All,

I have now succeeded in getting 4,5,6 and 7 slide shows to function correctly, at least in Chrome and Explorer.

In Chrome and Exolorer, the timings and slide displays and recycle are perfect for each number of slides.

Firefox, is a bit problematic although more annoying than anything. :(

In Firefox only, the slides come down with a 20% to 50% black band and then when they get to the bottom pop to full visibility.

This only happens in Firefox and not in Chrome or Explorer, which display correctly.

The original 5 slide show from Alessio also has this problem but to a lesser degree than on my slides:

When you start Alessios Demo, the first 2 slides come down with about a 20% dark band in Firefox, but not the rest of them until they recycle and then the first 2 have the 20% black band again.

Based on the recommendations here, I have not incorporated the -moz- references for FireFox.

If anybody could offer a suggestion I would appreciate it.

I can live with the Firefox discrepancies, but they detract from an otherwise great routine.

Also if anyone would like the "percents" and time for any of my slide shows, please let me know and I will publish them here. :)

(The 4 slide show numbers published previously do contain one mistake.)

Best Regards,

Gary McCray