jQuery slider having dynamic carousel
===

I created one custom jQuery slider having carousel which **ul** width is dynamically set from **li**. <br/>

I put one div id having **#bgWrapper** on body, On click carousel **li thumbnails** I changed the body background image using **#bgWrapper on rel image of li**. Like **li rel="images/bgimage/bgone.jpg"**<br/>

I want to change body background image as for thumbnails order of carousel On click of **Next / Previous arrow**.<br/>


**Here is my jQuery code:**<br/>
	
$(document).ready(function() {
	
	//Variable Define
	var thumbWrap = $("ul#carousel");
	var thumb = $("ul#carousel>li");
	var slider = $(".sliderCont");
	var ltarrow = $(".leftArrow");
	var rtarrow = $(".rightArrow");
	var ulwidth = 0;
	var bgImg = $("#bgWrapper");
	
	
	
	//Remove last LI margin for set UL perfect width
	$("ul#carousel>li:last-child").css("width","200px");
	
	
	
	//UL width from LI
	thumb.each(function(){ulwidth += $(this).width()});
	thumbWrap.width(ulwidth);
	
		
	
	//Use same LI width value on scrollLeft:
	ltarrow.click(function() {
    	slider.animate({scrollLeft:"-=225px"},{duration:"slow", easing:"easeInOutQuint"});
	});
	
	rtarrow.click(function() {
		slider.animate({scrollLeft:"+=225px"},{duration:"slow", easing:"easeInOutQuint"});
	});
	
	
	
	//BG Image Change reflect as relation of LI
	bgImg.css("background-image","url(images/bgimage/bgone.jpg)");	
	thumb.click(function() {
		bgImg.css("background-image","url('"+$(this).attr('rel')+"')");
    });
	

});<br/>