MEMBUAT CAROUSEL DENGAN BOOTSTRAP
Carousel atau sering disebut oleh kebanyakan orang slideshow merupakan sebuah proses penampilan gambar yang diberi efek slide yaitu gambar dapat berubah sesuai dengan waktu yang ditentukan atau kita dapat menggeser gambar menjadi gambar yang lain. Sangat banyak website yang menggunakan carousel atau slideshow pada website mereka untuk mempromosikan produk unggulan atau untuk tujuan lainya. Biasanya carousel diletakkan pada halaman depan seuah website dengan tampilan yang menarik agar pengunjung tertarik dan betah mengunjungi website tersebut.
Sangat susah untuk membuat carousel dengan cara manual. Dengan adanya class carousel pada Bootstrap kita dapat dengan mudah membuat carousel. Kita juga dapat menambahkan caption pada carousel kita dengan tujuan promosi atau tujuan lainya dan pastinya tampilan dari carousel tersebut mewah dan responsive.
Yang harus kita lakukan pertama kali adalah menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. Disini saya sudah menyediakan 3 file gambar untuk saya jadikan gambar yang muncul pada carousel.
 |
| Gambar yang saya sediakan |
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Carousel Dengan Bootstrap | <a href="http://www.script-kiddies.org">SCRIPT_KIDDIES</a></h1></center><br>
<div class="col-md-8 col-md-offset-2">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Deklarasi Carousel -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
<div class="carousel-caption">
<h3>SCRIPT_KIDDIES</h3>
<p>Tutorial Pemrograman Web, Mobile dan Design</p>
</div>
</div>
<div class="item">
<img src="Images/2.jpg" alt="SCRIPT_KIDDIES">
<div class="carousel-caption">
<h3>SCRIPT_KIDDIES</h3>
<p>Semua Ilmu Pemrograman Dasar Dari Penulis</p>
</div>
</div>
<div class="item">
<img src="Images/3.jpg" alt="SCRIPT_KIDDIES">
<div class="carousel-caption">
<h3>SCRIPT_KIDDIES</h3>
<p>Belajar Bootstrap Dasar</p>
</div>
</div>
</div>
<!-- Membuat Panah next Dan Previous -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Carousel pun jadi ^^ Sedikit info saya menambahkan class grid untuk mengatur ukuran gambar dan mengatur letak dari gambar tersebut jika sobat tidak membutuhkan class tersebut hapus saja karena grid tidak wajib diletakkan pada carousel
<div class="col-md-8 col-md-offset-2">Lalu untuk menambahkan indicator dari carouselnya sobat harus menambahkan class berikut
<!-- Indicators -->Sobat Bisa sobat otak atik sendiri, silahkan ganti gambarnya pada tag img-src dan masukkan nama gambar, slahkan ganti <h3> dan <p> sesuai keinginan sobat
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">Untuk membuat icon panah dan ketika panah tersebut kita klik maka gamar tersebut akan berubah gunakan class berikut ini
<div class="item active">
<img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
<div class="carousel-caption">
<h3>SCRIPT_KIDDIES</h3>
<p>Tutorial Pemrograman Web, Mobile dan Design</p>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Hasilnya !
 |
| Ketika icon panah kita click maka gambar akan berubah |
Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain
REFERENSI : Malas Ngoding
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
EmoticonEmoticon