Dzone icon Reddit icon
Facebook icon RSS Icon 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 W3Shools, quora, Digital Point, and other progressive Q/A 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 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.

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:

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:

The image swap and class toggles are handled by javascript event handlers for the click events on the buttons:

To stop the rotation we fire a clearLoop() function that can be as simple as setting the doingAll flag to false or much more complicated to reset all the default values. The complexity depends on how you implement it and integrate it into your page.

The code here is just some of the functionality; not a complete implementation. For the full code use the link at the bottom of the page to get the complete code in a plain text file that includes the event listeners used to fire functions when the buttons are clicked. You don't have to use the buttons for control.

If you want it to run automatically when the page loads, you can fire it off of the onload event. The code is even easier to implement for that because you don't need functions to manage the buttons or a lot event listeners. However It is still a good idea to have a button or link to allow the user to stop the effect; or even remove it because some users may consider it a distraction; especially if they are using a browser with the twitch problem.

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 your way

Closing the Slide Show

For some implementations you might want to end the slide show at some point. You can:

  1. End by displaying a default final image
  2. Just stop the rotation after a time limit or number of rotations
  3. Hide the slider

... OR ...

You can do something a little different with different ways to close the slide show

A file with all the code used in this article and the supporting snippets is available for download here. If you are going to implement this type of presentation, you need the download for the full code. If you try to work from just the example code you will get frustrated by not having the tiny bits and pieces that glue it together. Yes, you actually need to do some coding. This site is here for professionals and those who want to become professionals; not wannabes who are looking for plugins that don't require them to do any work. Try out the code and don't be afraid to experiment. Avoid the boring!

[Rant] The javascript for all the functions across the 5 pages of this series is about 7k including all the extra stuff in there for the buttons needed to do the demos. For actual implementation about 3-4k is required. Largest CSS load is about 16k and that includes the 12k used for theming. So the effects actually have a footprint for download of about 10k. That is less than 10% of the crap load you need to do it with a bloated jquery plugin.

Why would anyone who is not an imbecile use bloated crapware that is unreliable, difficult to maintain, and a possible source of malware? If you are not willing to learn how to code well enough to implement effects using CSS along with a little scripting please go find a job driving a taxi or flipping burgers because the Internet does not need any more wannabes spewing out sites that are all the same unimaginative junk that makes maggots puke.[/Rant]

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