Div Slider

by Gulam Jilani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="demo" class="showcase">
		<section id="examples">
			

			
			<!-- content -->
			<div id="content-5" class="content horizontal-images light">
				<span>
					<div><h2>Horizontal <br />auto-expanded <br />scrollbar</h2></div>
					<div><h2>theme: <br />"dark-thin"</h2></div>
					<div><h2>Horizontal <br />auto-expanded <br />scrollbar</h2></div>
					<div><h2>theme: <br />"dark-thin"</h2></div>
                    <div><h2>Horizontal <br />auto-expanded <br />scrollbar</h2></div>
					<div><h2>theme: <br />"dark-thin"</h2></div>
                    <div><h2>Horizontal <br />auto-expanded <br />scrollbar</h2></div>
					<div><h2>theme: <br />"dark-thin"</h2></div>
                    <div><h2>Horizontal <br />auto-expanded <br />scrollbar</h2></div>
					<div><h2>theme: <br />"dark-thin"</h2></div>
				</span>
			</div>
			
			
		</section>
	</div>

CSS

/* stylesheet for demo and examples */

.content{
	overflow: auto;
	position: relative;
	padding: 20px;
	background: #333;
	margin: 10px;
	width: 740px;
	max-width: 97%;
	height: 400px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.content.hidden{ display: none; }

.content.light{
	background-color: #ddd;
	color: #333;
}

.content hr{
	margin-bottom: -10px;
	border-top: 1px solid rgba(0,0,0,0.7);
}

.content.light hr{
	border-bottom: 1px solid rgba(255,255,255,0.6);
	border-top: 1px solid rgba(0,0,0,0.1);
}



hr + .content:nth-child(odd) h2{
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content.light h2{ color: inherit; }

.content img{
	margin: 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding: 3px;
	background: rgba(0,0,0,0.2);
}

.content.light img{ background: rgba(255,255,255,0.4); }

.content input[type='text'], .content textarea{
	border: none;
	background: transparent;
	background-color: #bbb;
	background-color: rgba(255,255,255,0.6);
	min-height: 20px;
	padding: 5px;
	-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	width: 50%;
	font-size: inherit;
	font-family: inherit;
	color: #222;
}

.content textarea{
	min-height: 80px;
	width: 70%;
}

.content .half img{
	max-width: 48%;
	margin: 0 0 2% 2%;
}

.content .half img:nth-child(odd){ margin: 0 2% 2% 0; }

#demo.showcase{ min-width: 740px; }

.showcase .content{
	float: left;
	width: 340px;
	height: 300px;
}

.showcase .horizontal-images.content{
	height: 140px;
	width: 700px;
	max-width: 97%;
	padding: 5px 5px 0 5px;
}

.showcase .horizontal-images.content h2,...

JavaScript

$("#content-5").mCustomScrollbar({
					axis:"x",
					theme:"dark-thin",
					autoExpandScrollbar:true,
					advanced:{autoExpandHorizontalScroll:true}
				});