Slider image atau caraousel pada sebuah website, membuat website menjadi lebih elegan dan menarik. ( Image slider or carousel can make a website more elegant and interesting).
Pada tutorial sebelumnya, telah diperkenalkan beberapa contoh pembuatan slider image baik yang statis maupun dinamis yang datanya diambil dari database. (In previous tutorial, has introduced several examples on making the image slider both static and dynamic [data retrieved from database] ).
Anda dapat menemukan tutorial image slider sebelumnya pada (You can find tutorial image slider earlier on):
Sekarang, bagaimana membuat image slider yang memiliki banyak kolom dalam satu baris. Masih bingung maksudnya, silahkan klik link berikut yang merupakan hasil setelah mempelajari tutorial edisi ini (Now, how to make image slider has multi column in a row. You're still confused what i mean, just click link below the end result of this tutorial)
Pastinya anda telah mendownload bootstrap, kalau belum kami sertakan beserta skrip tutorial ini. Buatlah sebuah file, disini kita berinama slider_multicol.html. Kemudian copy script berikut ke dalam file tersebut (Of course you have downloaded bootstrap, if not yet, we attach it along with this tutorial's source code. Create a file, here we named slider_multicol.html. After that copy the script below on such file).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multicolumn Bootstrap Carousel</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar-inverse {
background-color: #800040;
border-color: #080808;
font-size:18px;
}
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
.navbar-inverse .navbar-nav > li > a {
color: #F9F1F1;
}
.nav {
padding-left: 40px;
margin-bottom: 0;
list-style: none;
}
.tab { text-indent:28px }
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:115px;background-image:none;}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
#wrapper {
width: 800px;
height: 250px;
margin:auto;
padding:auto;
}
</style>
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#">
<img src="img/cawo.png" height="50px" width="50px" class ="img-circle" style=" margin-top: 7px;margin-bottom: 7px;margin-right: 7px;"/></a>
<h4 class="pull-right" style="color:#eee;padding-right:17px 0;">
Cawo-Cawo
<div class="tab">
<p style="color:#eee;">Cawo</p>
</div>
</h4>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action("About", "Home")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action("Contact", "Home")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action("Index", "Strains")">
<i class="glyphicon glyphicon-leaf"></i> Strains
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="container">
<div class ="row">
<div class="col-md-8 ">
<div class="carousel slide " id="myCarousel" >
<div id ="wrapper">
<div class="carousel-inner" >
<div class="item active">
<div class="col-md-4"><a href="#"><img src="img/cawo.png" width="250" height="250"></a>
<div class="carousel-caption center-caption" >
<h3>Gambar 1</h3>
</div>
</div>
</div>
<div class="item">
<div class="col-md-4"><a href="#"><img src="img/1.jpg" width="250" height="250"></a>
<div class="carousel-caption center-caption" >
<h3>Gambar 2</h3>
</div>
</div>
</div>
<div class="item">
<div class="col-md-4"><a href="#"><img src="img/sd.jpg" width="250" height="250"></a>
<div class="carousel-caption center-caption" >
<h3>Gambar 3</h3>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 3000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
</body>
</html>
Hasil akhir dari dari tutorial ini seperti yang ditunjukkan pada Live Demo diatas. Nah bagi anda yang ingin mendownload keseluruhan source code-nya dapat didownload pada ( The result of this tutorial has showed on Live Demo above. You can find all source code of this tutorial on):
