PENGERTIAN
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.
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.
LANGKAH-LANGKAH PENGERJAAN
Pertahatikan script dibawah ini :
<!DOCTYPE html>TEMUAN PERMASALAHAN
<html>
<head>
<title> Membuar Form 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>Belajar Membuat silde show bootstrap</h1></center>
<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="image/1.jpg" >
<div class="carousel-caption">
<h3>Slide Show 1</h3>
<p>Tutorial Pemrograman Web, Mobile dan Design</p>
</div>
</div>
<div class="item">
<img src="image/2.jpg">
<div class="carousel-caption">
<h3>Slide Show 2</h3>
<p>Semua Ilmu Pemrograman Dasar Dari Penulis</p>
</div>
</div>
<div class="item">
<img src="image/3.jpg" >
<div class="carousel-caption">
<h3>Slide Show 3</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>
Disini saya sempat mengalami permasalahan, yaitu carousel saya tidak bisa dislide show. Ternyata pemanggilan script jquery saya tidak berurutan. Dan saya baru tahu bahwa itu juga berpengaruh.
KESIMPULAN
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.
REFERENSI
http://www.bimablctelkom.com/2016/12/belajar-bootstrap-dasar-part-8-membuat.html
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon