<!--HTML-->

	<style>
#slides .slidesNext,#slides .slidesPrevious {
	position:absolute;
	top:50%;
	left:-40px;
	width:24px;
	height:0;
	margin-top:-32px;
	padding-top:32px;
	display:block;
	z-index:101;
	overflow:hidden;
	background:url(../img/navigation-previous.png) no-repeat 0 0;
}

#slides .slidesNext {
	left:798px;
	background:url(../img/navigation-next.png) no-repeat 0 0;
}

/*
	Pagination
*/

.slidesPagination {
	margin:10px 0 0;
	float:right;
}

.slidesPagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.slidesPagination li a {
	display:block;
	width:14px;
	height:0;
	padding-top:14px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	overflow:hidden;
}

.slidesPagination li.slidesCurrent a {
	background-position:0 -14px;
}

</style>

	<script>
    $(function(){
    	$("#slides").slides({
        responsive: true
    	});
    });
	</script>

	<style>

    #slides .slidesNext {
    	right:-35px;
    	left:auto;
    }
    #slides .slidesPrevious {
    	left:-35px;
    }
	</style>

	
	<div id="container1" style="width:100%">
    
    <p>Scale the browser window, good times.</p>
    
    <div id="slides">
    	<img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="100%" alt="Slide 1">
    	
    	<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="100%" alt="Slide 2">

    	<img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="100%" alt="Slide 3">

    	<img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="100%" alt="Slide 4">

    	<img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="100%" alt="Slide 5">

    	<img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="100%" alt="Slide 6">

    	<img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="100%" alt="Slide 7">
    </div>
	</div>