Juni 22, 2021
Slicebox Responsive 3D Image Slider

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.

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;
}

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;
}

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>

Gunakan Realtime HTML Editor ↗ untuk melihat dan mengedit hasil dari script di atas agar tampilanya lebih baik lagi.

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

Sedikit penjelasan tentang slicebox responsive 3D image slider, semoga bermanfaat, dan salam sukses untuk Anda semua.