HASANONTA - 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.
Akan saya beri contoh code untuk membuat carousel dengan Bootstrap :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 14 : Membuat Carousel dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Carousel Dengan Bootstrap | <a href="http://www.HasanOnta.ga">HasanOnta</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="1.png" alt="HasanOnta">
<div class="carousel-caption">
<h3>HasanOnta</h3>
<p>Tutorial Pemrograman Web, Mobile dan Design</p>
</div>
</div>
<div class="item">
<img src="2.png" alt="HasanOnta">
<div class="carousel-caption">
<h3>HasanOnta</h3>
<p>Semua Ilmu Pemrograman Dasar Dari Penulis</p>
</div>
</div>
<div class="item">
<img src="3.png" alt="HasanOnta">
<div class="carousel-caption">
<h3>HasanOnta</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>
Output :
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 -->
<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>
Anda Bisa sobat otak atik sendiri, silahkan ganti gambarnya pada tag img-src dan masukkan nama gambar, slahkan ganti <h3> dan <p> sesuai keinginan sobat
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/1.jpg" alt="HasanOnta">
<div class="carousel-caption">
<h3>HasanOnta</h3>
<p>Tutorial Pemrograman Web, Mobile dan Design</p>
</div>
</div>
Untuk membuat icon panah dan ketika panah tersebut kita klik maka gamar tersebut akan berubah gunakan class berikut ini
<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 :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar