adambutler/temp.html

## temp.html
<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet/less" href="less/style.less">
	<script src="js/libs/less-1.3.0.min.js"></script>

	<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
	to style.css, and replace the 2 lines above by this one:

	<link rel="stylesheet" href="less/style.css">
	 -->

	<script src="js/libs/modernizr-2.5.3.min.js"></script>

  <style type="text/css">

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    li {
      display: none;
      position: absolute;
      top:0;
      left: 0;
      width: 300px;
      height: 200px;
    }

  </style>

</head>
  <body>
    <ul>
      <li style="background: url('http://placehold.it/300x200&text=A');"></li>
      <li style="background: url('http://placehold.it/300x200&text=B');"></li>
      <li style="background: url('http://placehold.it/300x200&text=C');"></li>
    </ul>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="js/libs/bootstrap/bootstrap.min.js"></script>
    <script src="js/libs/jquery.hotkeys.js"></script>
    <script src="js/libs/handlebars.js"></script>
    <script src="js/libs/jquery.scrollto.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <script src="js/script.js"></script>

    <script type="text/javascript">

      var current = 0;

      $('ul li').eq(0).show();

      $(document).click(function(){
        console.log('woo');
        $('ul li').eq(current).hide('slide', {direction:'left'}, 500);
        $('ul li').eq(current+1).show('slide', {direction:'right'}, 500);
        current++;
      })

    </script>


  </body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet/less" href="less/style.less">
	<script src="js/libs/less-1.3.0.min.js"></script>

	<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
	to style.css, and replace the 2 lines above by this one:

	<link rel="stylesheet" href="less/style.css">
	-->

	<script src="js/libs/modernizr-2.5.3.min.js"></script>

	<style type="text/css">

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 300px;
	height: 200px;
	overflow: hidden;
	}

	li {
	display: none;
	position: absolute;
	top:0;
	left: 0;
	width: 300px;
	height: 200px;
	}

	</style>

	</head>
	<body>
	<ul>
	<li style="background: url('http://placehold.it/300x200&text=A');"></li>
	<li style="background: url('http://placehold.it/300x200&text=B');"></li>
	<li style="background: url('http://placehold.it/300x200&text=C');"></li>
	</ul>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
	<script src="js/libs/bootstrap/bootstrap.min.js"></script>
	<script src="js/libs/jquery.hotkeys.js"></script>
	<script src="js/libs/handlebars.js"></script>
	<script src="js/libs/jquery.scrollto.js"></script>
	<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
	<script src="js/script.js"></script>

	<script type="text/javascript">

	var current = 0;

	$('ul li').eq(0).show();

	$(document).click(function(){
	console.log('woo');
	$('ul li').eq(current).hide('slide', {direction:'left'}, 500);
	$('ul li').eq(current+1).show('slide', {direction:'right'}, 500);
	current++;
	})

	</script>


	</body>
	</html>