Jquery make your own ajax Slider.

While looking for a slider I’ve found a lot of plugins. But none was customized like the one I wanted. So I started looking for the creation technics to understand how its done. The main concept of the slider is to create a div that will use as a frame to the slider content. 

This div will have a constant width + height and the important thing is to set the overflow as hidden and relative positioning. and will contain 2 divs the first is the content the second is the worker (loader) div. 

The content div will have the  the slider width and height and will have relative positioning 

such as this: 

<div id="sliderFrame" style="width:500px;height:200px;overflow:hidden;position:relative;">
    <div id="contentDiv" style="width:500px;height:200px;position:relative;">[The Content]</div>
    <div id="workerDiv" style="width:500px;height:200px;position:relative;">[The Ajax Content]</div>
</div>

Now we will write a short jquery func to load the content and slide in, I’ve written it in a function but it can easily transform into plug-in. 

You will have to trigger that function in a “next” button or some other trigger. 

 
var loading = false;
function loadGalleryContent()
{
if (!loading)
{
loading = true;
$("#workerSpan").load([Place the server side function],'',function()
{
var syncFlag = 0; $("#workerSpan").css("opacity",0.2);
$("#workerSpan").animate({
"top": "-=200px",
"opacity" : 1
}, 2000,"swing",function()
{
syncFlag++;
if (syncFlag == 2)
{
InitGalleryAfterAnimation();
}
}
});
$("#contentSpan").animate({
"top": "-=200px",
"opacity" : 0.2
}, 2000,"swing",function()
{
syncFlag++;
if (syncFlag == 2)
{
InitGalleryAfterAnimation();
}
}
});
}
}
else
{
setTimeout(loadGalleryContent,1000);
}
}

function InitGalleryAfterAnimation()
{
$("#contentSpan").css("opacity",1);
$("#contentSpan").css("top","");
$("#workerSpan").css("top","");
$("#contentSpan").html($("#workerSpan").html());
$("#workerSpan").html(''); loading = false;
} 

The first function is loading the content, i’ve used the loading bool as a lock mechanisem since $.load() is async and can have muli calls. in the load postback we will call 2 asnc animation functions. That should slide the content from the bottom to the top. This slider can be adjusted by initing the workerDiv in another location and in the animation change the left to – right,top or bottom. for vertical or horizontal. You can custom it however you would like. You can add paging or other jquery animation effects, the important thing is to understant how it works. You can also adjudt it to work with out ajax. just place all the content in the content div (you don’t need the worker div) and play with the content div location.

you can find live example of the custom slider on This site, Its a project I’ve done for a shoe company. They requested a slider to show the shoes. that can run in automatic fashion and in menual.
Hope I’ve helped.

 Comments are more than welcome!

 Amir Katz

Advertisement