erikpukinskis · August 29, 2015 13:57
diff --git a/ideshowslay.html b/ideshowslay.html

 <html>
 	<head>
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

 		<style>
 		.slides {
 			overflow: hidden;
 			white-space: nowrap;
 		}

 		.slides, img {
 			height: 400px;
 			width: 600px;
 		}
 		</style>

 		<script>

 		var current = 0;
 		var width = 600;
 		var slides = [1,2,3,4,5,6];

 		$(function() {
 			var container = $('.slides .inner');
 	 		
 			for (var i=1; i<=6; i++) {
 				console.log(i);
 				var el = $('<img src="images/' + i + '.jpg">');
 				container.append(el);
 			}
 		});

 		function go(direction) {
 			current += direction;

 			if(current >= slides.length) {
 				current = 0;
 			} else if (current < 0) {
 				current = slides.length - 1;
 			}

 			var margin = (-1 * current * width) + 'px';

 			console.log(margin)
 			$('.slides .inner').animate({'margin-left': margin});
 		}

 		</script>

 	</head>

 	<body>

 	<a href="javascript:go(-1);">Back</a>
 	<a href="javascript:go(1);">Next</a>
 	<div class="slides">
 		<div class="inner"></div>
 	</div>

 	</body>
 </html>

	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

	<style>
	.slides {
	overflow: hidden;
	white-space: nowrap;
	}

	.slides, img {
	height: 400px;
	width: 600px;
	}
	</style>

	<script>

	var current = 0;
	var width = 600;
	var slides = [1,2,3,4,5,6];

	$(function() {
	var container = $('.slides .inner');

	for (var i=1; i<=6; i++) {
	console.log(i);
	var el = $('<img src="images/' + i + '.jpg">');
	container.append(el);
	}
	});

	function go(direction) {
	current += direction;

	if(current >= slides.length) {
	current = 0;
	} else if (current < 0) {
	current = slides.length - 1;
	}

	var margin = (-1 * current * width) + 'px';

	console.log(margin)
	$('.slides .inner').animate({'margin-left': margin});
	}

	</script>

	</head>

	<body>

	<a href="javascript:go(-1);">Back</a>
	<a href="javascript:go(1);">Next</a>
	<div class="slides">
	<div class="inner"></div>
	</div>

	</body>
	</html>