jquery custom horizontal scrollbar

Horizontal scrollbar

<!DOCTYPE html>
<html>
<head>
<title>JQuery Custom Scrollbar - basic usage demo</title>
<script	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.custom-scrollbar.js"></script>
<link type="text/css" rel="stylesheet"	href="jquery.custom-scrollbar.css" />
<style type="text/css">
/*Vertical scrollbar - set width and height of a div you want to add a scrollbar to*/
#horizontal-scrollbar-demo 
{
	width: 400px;
	height: 200px;
}

/*Horizontal scrollbar - set width of overview or make it expand horizontal like below*/
#horizontal-scrollbar-demo .overview 
{
	white-space: nowrap;
}

#horizontal-scrollbar-demo img 
{
	height: 180px;
	width: 180px;
}
</style>
</head>
<body>
	<h2>Horizontal scrollbar</h2>
	<!-- Add a skin class to the scrolled div: gray-skin in this case -->
	<div id="horizontal-scrollbar-demo" class="default-skin demo">
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
		<img src="http://www.loopandbreak.com/sampleImages/image1.png" alt=""> 
	</div>
	<script type="text/javascript">
    $(window).load(function ()
    {
        $(".demo").customScrollbar();
        $("#fixed-thumb-size-demo").customScrollbar({fixedThumbHeight: 50, fixedThumbWidth: 60});
    });
</script>
</body>
</html>

Output :