Bootstrap Carousel
Maret 29, 2017
Assalamualaikum Wr.Wb
Apa itu Carousel? Carousel ini merupakan semacam tampilan slide show pada tampilan web yang telah di sediakan Bootstrap selain tampilannya lumayan menarik kita juga tidak perlu repot - repot membuat stylenya.Siapkan beberapa gambar yang akan kita masukkan dalam carousel dan jangan lupa downoad dulu bootstrapnya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog Amatir</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.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>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Contoh Carousel</h1>
</div>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indikator -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- gambar slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="4.jpeg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="1.jpeg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="2.jpeg" alt="gambar2" width="460" height="345">
</div>
<div class="item">
<img src="3.jpeg" alt="gambar3" width="460" height="345">
</div>
</div>
<!-- kontrol kanan kiri -->
<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>
</body>
</html>
Dan inilah hasilnya, gambar akan berubah seperti slide pada umumnya dan jangan lupa gambar harus jadi satu folder dengan file yang scripnya sudah saya cantumkan di atas simpan dengan fomat .html
Oke itu tadi mengenai carousel dengan bootstrap semoga bermanfaat terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
0 comments