A common feature of many web sites is a slide show. They have become so common and so similar, that they are a yawn. There are literally thousands of plugins for slide shows. They all work pretty much the same, and bloat the pages. They are also BORING.
They all have the same boring features. Everyone uses the same boring effects. How about multiple sliders? Just more bloat, and more boring crappy pages. Spice it up with flash or video? That just adds crap to crap. You can't save a page by adding bloat.
So what we are going to do is a round element with an iris for our slider:
Start here: Now close it Do a slide show:
I may appear that there is an extra div "outer"; but it is essential to wrap the div with the effect. It carries a critical style to set min-height. Without it both Chrome and Firefox are a little twitchy at the bottom of the iris and cause the following content to do 1 px shifts during the transitions. For some reason they keep trying to re-size the slide. A bug in both the Gecko and Blink rendering engines I guess. The IE rendering engine Trident does not have the same problems on any version of IE9+ which is a real surprise because you expect IE to be the problem child for dynamic effects.The code is as simple as it gets: