It looks like a custom JS file from their end, but I’d like to find something a little more mainstream that looks and acts very similarly, especially with the easing in and out of images.
This script duplicates the Moo Tools slider, but uses a table to hold the background images instead of a CSS controlled <li> list. Yes, I know tables are a no-no for positioning on a page, but in this case it gives a far more stable result.
You will need to create 4 images 205px wide x 100px high for this to work.
I have used javascript here, not JQuery.
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Image Slider</title>
<script type=“text/javascript”>
<!–
var currentObj1=null, currentObj2=null, count1=null, count2=null; // global
// ======= change settings here =======
var pauseIt=10, stepIt=5; // <<<< global msec pause & step
// ====================================
// expand boxes
var exp=function ()
{ currentObj1=this;
// counters is property of each td
count1=this.counters;
setTimeout(“process1()”,pauseIt);
}
// ----- end exp()------
function process1()
{// check if limit exceeded
// width range from 125 to 205px
if(count1+stepIt<205)
{ count1=count1+stepIt;
// increment this obj counter
currentObj1.counters=count1;
// increase box width
currentObj1.style.width=count1+“px”;
// cycle again after pause
setTimeout(“process1()”,pauseIt);
}
}
// ========== end process1 =============================================
// contract boxes
var cont=function()
{ currentObj2=this;
// counters is property of each td
count2=this.counters;
setTimeout(“process2()”,pauseIt);
}
// ------- end cont ------------
function process2()
{ // check if limit exceeded
// width range from 205 to 125px
if(count2-stepIt>125)
{ count2=count2-stepIt;
// decrement this obj counter
currentObj2.counters=count2;
currentObj2.style.width=count2+“px”;
setTimeout(“process2()”,pauseIt);
}
}
// ============= end process2 ===================