MakingajQueryinfinitecarouselwithnicefeatures

Firstofall,someofthestuffyoumentionedinthecomments,theyaregreat,thankyouforthat,but
theycantexactlybebultinintothistypeofcarouselsoinnearfutureiwillcodeadifferentjQuery
carouselandimplementthefeaturesyouwanted.
IfyousawthefirsttutorialyouwillnoticethattheHTMLandCSSarealmostthesame,onlythejQuery
codingchangedinabiggerscale.
HTML

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<divid='carousel_container'>
<divid='left_scroll'><ahref='javascript:slide("left");'><imgsrc='left.png'/></a></div>
<divid='carousel_inner'>
<ulid='carousel_ul'>
<li><ahref='#'><imgsrc='item1.png'/></a></li>
<li><ahref='#'><imgsrc='item2.png'/></a></li>
<li><ahref='#'><imgsrc='item3.png'/></a></li>
<li><ahref='#'><imgsrc='item4.png'/></a></li>
<li><ahref='#'><imgsrc='item5.png'/></a></li>

</ul>
</div>
<divid='right_scroll'><ahref='javascript:slide("right");'><imgsrc='right.png'/></a></div>
<inputtype='hidden'id='hidden_auto_slide_seconds'value=0/>
</div>

I think only one of these properties needs to be explained further. The left margin of our unordered list is 210px. Thats because the last item will be moved before the first item, so we are setting the left margin to
a negative number of the items width.

CSS
1.
2.
3.
4.
5.
6.
7.

#carousel_inner{
float:left;/*importantforinlinepositioning*/
width:630px;/*important(thiswidth=widthoflistitem(includingmargin)*itemsshown*/
overflow:hidden;/*important(hidetheitemsoutsidethediv)*/
/*nonimportantstylingbellow*/
background:#F0F0F0;
}

8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.

#carousel_ul{
position:relative;
left:
210px;/*important(thisshouldbenegativenumberoflistitemswidth(includingmargin)*/
liststyletype:none;/*removingthedefaultstylingforunorderedlistitems*/
margin:0px;
padding:0px;
width:9999px;/*important*/
/*nonimportantstylingbellow*/
paddingbottom:10px;
}

#carousel_ulli{
float:left;/*importantforinlinepositioningofthelistitems*/
width:200px;/*fixedwidth,important*/
/*juststylingbellow*/
padding:0px;
height:110px;
background:#000000;
margintop:10px;
marginbottom:10px;
marginleft:5px;
marginright:5px;
}

#carousel_ulliimg{
.marginbottom:
4px;/*IEismakinga4pxgapbellowanimageinsideofananchor(<ahref...>)sothisistofix
that*/
/*styling*/
cursor:pointer;
cursor:hand;
border:0px;
}
#left_scroll,#right_scroll{
float:left;
height:130px;
width:15px;
background:#C0C0C0;
}
#left_scrollimg,#right_scrollimg{
border:0;/*removethedefaultborderoflinkedimage*/
/*styling*/
cursor:pointer;
cursor:hand;

Now, the main part

JQuery
1.
2.

$(document).ready(function(){

3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.

//options(1ON,0OFF)
varauto_slide=1;
varhover_pause=1;
varkey_slide=1;

//speedofautoslide(
varauto_slide_seconds=5000;
/*IMPORTANT:iknowthevariableiscalled...secondsbutit's
inmilliseconds(multipliedwith1000)'*/

/*movethelastlistitembeforethefirstitem.Thepurposeofthisis
iftheuserclickstoslidelefthewillbeabletoseethelastitem.*/
$('#carousel_ulli:first').before($('#carousel_ulli:last'));

//checkifautoslidingisenabled
if(auto_slide==1){
/*settheinterval(loop)tocallfunctionslidewithoption'right'
andsettheintervaltimetothevariablewedeclaredpreviously*/
vartimer=setInterval('slide("right")',auto_slide_seconds);

/*andchangethevalueofourhiddenfieldthatholdinfoabout
theinterval,settingittothenumberofmillisecondswedeclaredpreviously*/
$('#hidden_auto_slide_seconds').val(auto_slide_seconds);
}

//checkifhoverpauseisenabled
if(hover_pause==1){
//whenhoveredoverthelist
$('#carousel_ul').hover(function(){
//stoptheinterval
clearInterval(timer)
},function(){
//andwhenmouseoutstartitagain
timer=setInterval('slide("right")',auto_slide_seconds);
});

//checkifkeyslidingisenabled
if(key_slide==1){

//bindingkeypressfunction
$(document).bind('keypress',function(e){
//keyCodeforleftarrowis37andforrightit's39'
if(e.keyCode==37){
//initializetheslidetoleftfunction
slide('left');
}elseif(e.keyCode==39){
//initializetheslidetorightfunction
slide('right');
}
});

});

//FUNCTIONSBELLOW

//slidefunction
functionslide(where){

//gettheitemwidth
varitem_width=$('#carousel_ulli').outerWidth()+10;

/*usingaifstatementandthewherevariablecheck
wewillcheckwheretheuserwantstoslide(leftorright)*/
if(where=='left'){
//...calculatingthenewleftindentoftheunorderedlist(ul)forleftsliding

72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.

varleft_indent=parseInt($('#carousel_ul').css('left'))+item_width;
}else{
//...calculatingthenewleftindentoftheunorderedlist(ul)forrightsliding
varleft_indent=parseInt($('#carousel_ul').css('left'))item_width;

//maketheslidingeffectusingjQuery'sanimatefunction...'
$('#carousel_ul:not(:animated)').animate({'left':left_indent},500,function(){

/*whentheanimationfinishesusetheifstatementagain,andmakeanilussion
ofinfinitybychangingplaceoflastorfirstitem*/
if(where=='left'){
//...andifitslidedtoleftweputthelastitembeforethefirstitem
$('#carousel_ulli:first').before($('#carousel_ulli:last'));
}else{
//...andifitslidedtorightweputthefirstitemafterthelastitem
$('#carousel_ulli:last').after($('#carousel_ulli:first'));
}

//...andthenjustgetbackthedefaultleftindent
$('#carousel_ul').css({'left':'210px'});
});

Final words
Thats it, hope you like this revisit and upgrade of the first jquery infinite carousel, and if you wish some
more stuff to be implemented now it should be easy to make it into this coding, so say what you want