Slicebox Responsive 3D Image Slider

Pada kali ini kita akan membuat slicebox responsive 3D image slider dengan cara yang sedikit berbeda dari biasanya.

Berbeda seperti apa? karena kali ini ini kita akan menggunakan 3 external css, 3 external js, dan jQuery.

Script slicebox ini sangat menarik di pelajari atau sebagai bahan latihan lanjutan dalam belajar html dan css tentunya.

Berikut di bawah adalah css untuk slicebox 3D image slider.

Slicebox CSS custom

.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(https://my-id.site/images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%;
	z-index: -1;
	display: none;
}
.sb-description h3 {
	font-size: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.sb-description h3 a {
	color: #4a3c27;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.nav-arrows {
	display: none;
}
.nav-arrows a {
	width: 42px;
	height: 42px;
	background: #cbbfae url(https://my-id.site/images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 2px;
	text-indent: -9000px;
	cursor: pointer;
	margin-top: -21px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.nav-arrows a:first-child{
	left: auto;
	right: 2px;
	background-position: top right;
}
.nav-arrows a:hover {
	opacity: 1;
}
.nav-dots {
	text-align: center;
	position: absolute;
	bottom: -5px;
	height: 30px;
	width: 100%;
	left: 0;
	display: none;
}
.nav-dots span {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #cbbfae;
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}
.nav-dots span.nav-dot-current {
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1), 
		inset 0 0 0 3px #cbbfae,
		inset 0 0 0 8px #fff;
}
.nav-options {
	width: 70px;
	height: 30px;
	position: absolute;
	right: 70px;
	bottom: 0px;
	display: none;
}
.nav-options span {
	width: 30px;
	height: 30px;
	background: #cbbfae url(https://my-id.site/images/options.png) no-repeat top left;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.7;
	display: inline-block;
	border-radius: 50%;
}
.nav-options span:first-child{
	background-position: -30px 0px;
	margin-right: 3px;
}
.nav-options span:hover {
	opacity: 1;
}

Slicebox CSS demoslicebox

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Volkhov:400italic,700);

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
body {
	background: #e4ebe9 url(https://my-id.site/images/fancy_deboss.png) repeat top left;
	color: #444;
	font-family: "PT Sans Narrow", Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-width: 320px;
}
a {
	color: #000;
	text-decoration: none;
}
h1, h2, h5 {
	margin: 20px 20px 30px 20px;
	font-size: 56px;
	color: #fff;
	font-family: "Volkhov", serif;
	text-align: center;
	font-weight: 700;
	text-shadow: 1px 1px 3px #e0d1bc;
}
h1 span, h5 {
	font-size: 18px;
	display: block;
	font-style: italic;
	color: #997f5a;
	font-weight: 400;
	text-shadow: 0px 1px 1px #fff;
}
.wrapper {
	position: relative;
	max-width: 840px;
	width: 100%;
	padding: 0 50px;
	margin: 0 auto;
}
.more {
	position: relative;
	clear: both;
	padding: 20px;
}
.more:before {
	content: "";
	position: absolute;
	background-color: #ddd1b6;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8);
	height: 1px;
	width: 440px;
	left: 50%;
	margin-left: -220px;
	top: -10px;
}
.more ul {
	display: block;
	height: 32px;
	text-align: center;
}
.more ul li {
	display: inline-block;
	line-height: 24px;
}
.more ul li.selected a,
.more ul li.selected a:hover {
	background: #ae997a;
	color: #fff;
	text-shadow: none;
}
.more ul li a {
	text-shadow: 1px 1px 1px #fff;
	color: #555;
	background: #fbf9f5;
	padding: 2px 5px;
	margin: 0 2px;
	line-height: 18px;
	display: inline-block;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.more ul li a:hover {
	background: #8c795d;
	color: #fff;
	text-shadow: none;
}
p.info {
	font-family: "Volkhov", serif;
	font-style: italic;
	color: #997f5a;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
	padding: 20px;
	display: block;
	clear: both;
	text-align: center;
	width: 100%;
	max-wdith: 440px;
	margin: 0 auto;
}

Slicebox CSS 3D animasi

.sb-slider {
	margin: 10px auto;
	position: relative;
	overflow: hidden;
	width: 100%;
	list-style-type: none;
	padding: 0;
}
.sb-slider li {
	margin: 0;
	padding: 0;
	display: none;
}
.sb-slider li > a {
	outline: none;
}
.sb-slider li > a img {
	border: none;
}
.sb-slider img {
	max-width: 100%;
	display: block;
}
.sb-description {
	padding: 20px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.4);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	color: #fff;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}
.sb-slider li.sb-current .sb-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}
.sb-slider li.sb-current .sb-description:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
	background: rgba(190,176,155, 0.7);
}
.sb-perspective {
	position: relative;
}
.sb-perspective > div {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}
.sb-side {
	margin: 0;
	display: block;
	position: absolute;
	-moz-backface-visibility : hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

Diatas adalah 3 CSS external yang harus di include atau di masukan kedalam halaman utama html.

Untuk external javascript, akan Saya gabung di halaman utama html-nya, semua file html, css dan javascript bisa anda download ↗ pada link di bawah artikel ini.

Script utama html slicebox.

<!DOCTYPE html>
<html lang="id">
<head>
	<title>Slicebox Responsive 3D Image Slider</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<link rel="stylesheet" type="text/css" href="https://my-id.site/editor/css/demoslicebox.css" />
	<link rel="stylesheet" type="text/css" href="https://my-id.site/editor/css/slicebox.css" />
	<link rel="stylesheet" type="text/css" href="https://my-id.site/editor/css/custom.css" />
	<script type="text/javascript" src="https://my-id.site/editor/js/modernizr.custom.46884.js"></script>
</head>
<body>
	<div class="container">

		<h1>Slicebox <span>Responsive 3D image slider with graceful fallback</span></h1>
		<div class="wrapper">

			<ul id="sb-slider" class="sb-slider">
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a1.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a2.jpg" alt="image2"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a3.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a4.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a5.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a6.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
				<li>
					<a href="#"><img src="https://my-id.site/images/bg/a7.jpg" alt="image1"/></a>
					<div class="sb-description">
						<h3>Deskripsi gambar disini</h3>
					</div>
				</li>
			</ul>

			<div id="shadow" class="shadow"></div>

			<div id="nav-arrows" class="nav-arrows">
				<a href="#">Next</a>
				<a href="#">Previous</a>
			</div>				

		</div>		
	</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://my-id.site/editor/js/jquery.slicebox.js"></script>
<script type="text/javascript">
	$(function() {				
		var Page = (function() {
			var $navArrows = $( '#nav-arrows' ).hide(),
				$shadow = $( '#shadow' ).hide(),
				slicebox = $( '#sb-slider' ).slicebox( {
					onReady : function() {
						$navArrows.show();
							$shadow.show();
					},
					orientation : 'r',
					cuboidsRandom : true
				} ),						
				init = function() {
					initEvents();							
				},
				initEvents = function() {
					$navArrows.children( ':first' ).on( 'click', function() {
						slicebox.next();
						return false;
					} );
					$navArrows.children( ':last' ).on( 'click', function() {				
						slicebox.previous();
						return false;
					} );
				};
				return { init : init };
		})();
		Page.init();
	});
</script>

</body>
</html>

Cukup panjang bukan script slicebox responsive 3D image slider diatas, namun Anda tetap bisa menggunakan Realtime HTML Editor ↗ untuk meng-edit dan melihat hasil script diatas.

Download script diatas dalam bentuk rar di: Google drive . *Semua file css, js dan index.html-nya sudah satu bundle didalamnya.

Sampai disini saja script gratis tentang slicebox responsive 3D image slider, semoga bermanfaat, dan salam sukses untuk Anda semua.

Mungkin Anda Menyukai