JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div id="wrap">
			<div id="controls">
				<div class="prev">&larr;</div>
				<div class="next">&rarr;</div>
			</div>
			<div id="caption">
			</div>
			
			<div id="content">
				<div class="pan">
					<div class="page"><span><img alt="first_img" src="img/1_large.jpg" /></span></div>
					<div class="page"><span><img alt="second_img" src="img/10_large.jpg" /></span></div>
					<div class="page"><span><img alt="third_img" src="img/12_large.jpg" /></span></div>
					<div class="page"><span><img alt="fourth_img" src="img/14_large.jpg" /></span></div>
				</div>
			</div>
		</div>

CSS

header, nav, section, article, aside, footer {
   display: block;
}

html {
	padding: 30px 0 100px 0;
	margin: 0;
	border-top: 70px solid #003580;
	background-color: #fff;
	color: #333;
	font-family: arial, sans-serif;
	font-size: 13px;
	position: relative;
}

body {
	padding: 0;
	margin: 0 auto;
	width: 960px;
}

section {
	margin: 0 0 20px 0;
	clear: both;
}

h1 {
	font-size: 32px;
	color: #0896ff;
}

h2 {
	font-size: 22px;
	font-weight: normal;
	color: #666;
}

/* header */

.header {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.hotel_name {
	margin: 0 0 5px 0;
}

.hotel_address {
	color: #999;
}

.stars {
	color: #feba02;
}

/* photos */

.photos ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.photos .one_photo {
	display: inline;
}

.photos .one_photo img {
	margin: 3px;
	width: 80px;
}

/* reviews */

.reviews_list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.one_review {
	padding: 10px 10px 10px 100px;
	background-color: #e6edf6;
	border-radius: 5px;
	margin-bottom: 10px;
	position: relative;
	min-height: 60px;
}

.one_review cite:before {
	content: '— ';
}

.review_score {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 80px;
	background-color: #003580;
	color: #fff;
	text-align: center;
	font-size: 48px;
	border-radius: 5px;
}

.review_content {
	padding: 0;
	margin: 0;
}

.review_content cite {
	display: block;
	margin-top: 5px;
}

div.push-down{
	margin-bottom: 12px;
} 

/* footer */

.footer {
	color: #fff;
	display: block;
	width: 100%;
	text-align: center;
	background: #003580;	
	margin: 0;
	padding: 30px 0;
	position: absolute;
	bottom: 0;
	left: 0;
}

a{
	text-decoration: none;
} 

#next{
	float: right;
	padding: 0 0 0.2em 0;
} 

span.on-page{
	padding: 0 71px;
}

#prev{
	margin: 0 0 0 680px; 
}

div.controls{
	font-size: 15px; 
	font-weight: bold;
} 

div#geolocation-status{
	display: none;
} 

div#map{
	width: 960px;
	height: 400px;
} 

#sort{
	position: relative;
	float: right;
	top:...

JavaScript

(function(){
		// Two-part parallax-like slider
		var ele = $("#content .pan .page"),
			items = [];
		ele.each(function(tag){
			items.push("<div class='page'><span class='title'>" + $(ele[tag]).find("img").attr("alt") + "</span></div>");				
		});
		
		$( "<div/>", {
			html: items.join( "" )
		}).appendTo( "#caption" );
		
		$("#caption").find("div:first").addClass("pan");
		

		var slider = {
			length: parseInt($("#caption .page").length),
			current: 1,
			width: $("#caption").width(),
			next: function(){
				if(this.current < this.length){
					this.current = this.current + 1;
					this.animation();
				} else {
					this.current = 1;
					this.animation();
				}
			},
			animation: function(){
				var target = (0 - this.width) * (this.current - 1);
				this.run("#caption", target);
				target = target * 2;
				this.run("#content", target);
			},
			prev: function(){
				if(this.current > 1){
					this.current = this.current - 1;
					this.animation();
				} else {
					this.current = this.length;
					this.animation();
				}
			},
			run: function(part, target){
				$(part + " .pan").stop().animate(
					{"margin-left": target},
					1000
				);
			},
			initialize: function(){
				$("#controls .next").click(function(){slider.next();});
				$("#controls .prev").click(function(){slider.prev();});
			}
		};
		
		//initialize slider controls
		slider.initialize();
		
		//auto scroll
		setInterval(function(){
			slider.next()
		}, 3500);
	})();