Scrollable Divs

Divs scrolling using hammer.js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
<a href="#" id="esq">Left</a>
	<a href="#" id="dir">Right</a>
	<div id="container">
		<div id="box1" class="box ativo">Div #1</div>
		<div id="box2" class="box">Div #2</div>
		<div id="box3" class="box">Div #3</div>
		<div id="box4" class="box">Div #4</div>
		<div id="box5" class="box">Div #5</div>
	</div>

CSS

body {
			padding: 0px;
		}

		#container {
			position: relative;
			margin: 0px;
			padding: 0px;
			width: 250px;
			height: 250px;
			overflow: hidden;
			background-color: #bfbdbd;
		}

		.box {
			position: absolute;
			width: 150px;
			height: 150px;
			line-height: 150px;
			font-size: 40px;
			text-align: center;
			border: 2px solid black;
			display: block;
			top: 50px;
			margin-left: -33%;
			left: 150%;
		}

		.ativo { display: block; }

		#box1 {
			background-color: green;
			left: 50%;
		}

		#box2 {
			background-color: yellow;
		}

		#box3 {
			background-color: red;
		}

		#box4 {
			background-color: orange;
		}

		#box5 {
			background-color: blue;
		}

JavaScript

$(function() {
			$("#esq").click(function() {
				console.log("Esquerda !");
				var obj = $(".ativo");
				$(obj).animate({
					left: '-50%'
				}, 500, function() {
					$(this).css('left', '+150%');
    				$(this).appendTo('#container');
				});
				$(obj).next().animate({
					left: '+50%'
				}, 500, function() {
					$(this).addClass('ativo');
					$(obj).removeClass('ativo');
				});
			});

			$("#dir").click(function() {
				console.log("Direita !");
				var obj = $(".ativo");
				var prox = $(obj).siblings(":last");
				$(obj).animate({
					left: '+150%'
				}, 500, function() {
					$(prox).prependTo('#container');
				});
				$(prox).css('left', '-50%');
				$(prox).animate({
					left: '+50%'
				}, 500, function() {
					$(this).addClass('ativo');
					$(obj).removeClass('ativo');
				});
			});

			var hammertime = new Hammer( document.getElementById("container") );
			hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
			hammertime.on('swipeleft', function() {
				$("#esq").trigger("click");
			});
			hammertime.on('swiperight', function() {
				$("#dir").trigger("click");
			});
		});