Round Slide Show with Iris

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:

 The HTML:
 <div id="outer">
<div id ="slidediv1" class="I0">&nbsp;
</div></div>
==============
The CSS:
 #slidediv1   {
            background-color:dodgerblue;
             height:0px;
            width:0px;
            margin:auto;
            border: 150px solid  red;
           border-radius:50%;
            position:relative;
            margin:auto;
          }
.I0  {           background-image:url(yourimage1.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
.I1 {           background-image:url(yourimage2.jpg);
                background-position:center center;}
.I2  {           background-image:url(yourimage3.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
 .I3 {           background-image:url(yourimage4.jpg);
                background-position:center center;}
 .I4  {           background-image:url(yourimage5.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
 .I5 {           background-image:url(yourimage6.jpg);
                background-position:center center;}          
===============
The script:
count=15;
 bdr=150;
big=0;
doingAll=false;
slideNo=0;
slideTarget=0;
function doLoop()
{
    el=document.getElementById('slidediv1');
    el.style.display='block';
    bdr-=10;
    el.style.borderWidth=bdr+'px';
    el.style.width=(el.offsetWidth-(bdr*2)+20)+'px';
    el.style.height=(el.offsetHeight-(bdr*2)+20)+'px';
    count--;
    if (count>0) 
    {
        ST = setTimeout('doLoop()',50);
    }
    else
    {
        if (doingAll) ST=setTimeout('negLoop()',2000);
    }
}
function negLoop()
{
    el=document.getElementById('slidediv1');
    bdr+=10;
    el.style.borderWidth=bdr+'px';
    el.style.width=(el.offsetWidth-(bdr*2)-20)+'px';
    el.style.height=(el.offsetHeight-(bdr*2)-20)+'px';
    count++;
    if (count<15) 
    {
        ST = setTimeout('negLoop()',50);
   }
   else
   {
        if (doingAll)  switchImage();
    }
}
function switchImage()
{
        big++;
        big=(big>5)? 0 : big;
        el.className='I'+big;
        doAll();
}
function doAll()
{
    doingAll=true; 
    doLoop();
}

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:

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

... 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!

CSS Based Round Slide Show With an Iris

Play with the Borders

Round is Not the Only Alternate Shape

Sliding Through the Shape

Closing the Slide Show