بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh
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):
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI),
Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh
Artikel Membuat bootstrap carousel multi column, Diterbitkan oleh scodeaplikasi pada Senin, 21 September 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code ,Dengan Cara menghubungi saya
Ke Email: Fajarudinsidik@gmail.com, atau
No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.
