Carousel atau juga sering di sebut Slideshow merupakan proses manampilkan gambar yang sering di beri efek slide. Dan sangat banyak sekali Website yang menggunakan Slideshow atau Carousel.
Biasanya Carousel ini diletakkan pada halaman depan sebuah website dengan design yang berbagai macam dan tentunya menarik perhatian para pengunjung website.
Untuk Membuat Carousel atau Slideshow sangat sulit kalau dengan cara yang manual, Tetapi dengan menggunakan Bootstrap kita akan sangat mudah untuk Membuat Carousel karena Bootstrap sudah menyediakan berbagai class terutama untuk Membuat Carousel.
Dan dibawah ini saya akan memberikan contoh seditik untuk Membuat Carousel Dengan Bootstrap.
Membuat Carousel Dengan Bootstrap
Yang harus kita ketahui sebelum Membuat Carousel, yang pertama kali harus menyimpan beberapa file gambar yang kita akan kita gunakan menjadi gambar yang muncul pada Carousel.
<!DOCTYPE html>Di bawah ini adalah hasil dari script di atas
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Carousel dengan Bootstrap</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="7.jpg" alt="indonesia indah">
<div class="carousel-caption">
<h3>Pesona Indonesia</h3>
<p>Alam indonesia penuh makna</p>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Indonesia Indah">
<div class="carousel-caption">
<<h3>Pesona Indonesia</h3>
<p>Alam indonesia penuh makna</p>
</div>
</div>
<div class="item">
<img src="4.jpg" alt="Indonesia Indah">
<div class="carousel-caption">
<h3>Pesona Indonesia</h3>
<p>Alam indonesia penuh makna</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>
Referensi : malasngoding.com
Tidak ada komentar :
Posting Komentar