ilyakava/gist:6189383

## gistfile1.txt
```
<style>
#carousel {
  position: relative;
	margin: 50px auto;
}

#carousel > ul {
	position: absolute;
	/* left: -500; */ /*use this to move it*/
	height: 300px;
	width: 2000px;
}

#carousel > ul > li {
	float: left;
	height: 300px; /* makes the clearfix superfluous sort of */
	width: 500px;
}

</style>

<body>
<div id="carousel">
  <ul class="group">
  	<li>One</li>
  	<li>Two</li>
  	<li>Three</li>
  	<li>FOur</li>
  </ul>

</div>

<script src="jsquery.js"></script>
<script>

	var Carrousel = (function () {
		var carrouself = $('#carrousel');
		var listHolder = carrousel.find("> ul");
		var listItems = listHolder.find("> li");
		var listItemsCount = listItems.length;
		var listItemsWidth = listItems,first().width();

		var init = function () {
			var totalWidth = listItemsCount * listItemsWidth;
			// dynamically generated css
			listHolder.css({"width": totalWidth + "px"})

			bind();
		}

		var bind = function () {

		}

		var move = function () {
			listHolder.css({"left": "-" + listItemWidth + "px"})
		}


		return {

		}
	})();

</script>
```
	```
	<style>
	#carousel {
	position: relative;
	margin: 50px auto;
	}

	#carousel > ul {
	position: absolute;
	/* left: -500; / /use this to move it*/
	height: 300px;
	width: 2000px;
	}

	#carousel > ul > li {
	float: left;
	height: 300px; /* makes the clearfix superfluous sort of */
	width: 500px;
	}

	</style>

	<body>
	<div id="carousel">
	<ul class="group">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>FOur</li>
	</ul>

	</div>

	<script src="jsquery.js"></script>
	<script>

	var Carrousel = (function () {
	var carrouself = $('#carrousel');
	var listHolder = carrousel.find("> ul");
	var listItems = listHolder.find("> li");
	var listItemsCount = listItems.length;
	var listItemsWidth = listItems,first().width();

	var init = function () {
	var totalWidth = listItemsCount * listItemsWidth;
	// dynamically generated css
	listHolder.css({"width": totalWidth + "px"})

	bind();
	}

	var bind = function () {

	}

	var move = function () {
	listHolder.css({"left": "-" + listItemWidth + "px"})
	}


	return {

	}
	})();

	</script>
	```