Why this site looks better in Firefox
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Dzone icon Reddit icon Facebook icon RSS Icon


CSS Based Round Slide Show With an Iris

Author: COBOLdinosaur

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 how about a slide show that does something different? Some different options? No bloat. No plugins. Just a little CSS plus a bit of script equals a unique dynamic presentation. Best of all no hacks required to be cross-browser. Just 100% standard CSS in a simple layout driven by standard javascript.

So what we are going to do is a round element with an iris for our slider:


You can start here: Then close the iris Now Let's do a slide show:

The code is as simple as it gets:

Play with the Borders

Okay that is a little different. What else can we do? We can alter the look by playing with the borders like we do in this snippet: Border options for round slide shows

Round is Not the Only Alternate Shape

So let's take the next step and add some additional shapes using this snippet: Alternate Iris Shapes

Sliding Through the Shape

For presentation purposes, you might want to use a shape but actually just cycle through the images without using the Iris. The controlled slow slide looks difficult, but with sprites it is actually child's play if you do your slider this way

Closing the Slide Show

It might be the case where you want to end the slide show at some point. You can:

... OR ...

You can do something a little different with a dissolve of the slide show

A file with all the code used in this article and the supporting snippets is available for download here.

Try out the code and don't be afraid to experiment. Avoid the boring!

If you found this article helpful you might also be interested in:

Comment by: drifter 2012-09-22 12:19:19

I like the one with the double border. Do you think it would be possible to alternate the background color or even the background while the thing is opening and closing?

There is a little Homer Simpson in all of us
big D

Comment by: COBOLdinosaur 2012-09-22 12:45:20

You could modify the script to do a swap. It would be a matter of deciding how many iterations you want to do between swaps. However you have to be careful not to load to much into the function or thing could slow to a crawl.

100% standards compliant code is 100% correct
100% of the time

Comment by: drifter 2012-10-08 17:14:48

I'm playing with it, I see it is pretty easy to really slow it down.

There is a little Homer Simpson in all of us
big D

Comment by: drifter 2013-03-19 13:34:17

You actually can do some neat shadow effects with this.

There is a little Homer Simpson in all of us
big D

Got an idea for an article? Author Guidelines

To comment on this article LOGIN or REGISTER FOR FREE
Want to talk about this page? Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE