Assallamuallaikum Wr Wb ,.
Halo kawan kawan di kesempatam kali ini saya akan sedikit berbagi
tutorial tentang Membuat Carousel / Slideshow gambar dengan bootstrap.
Pembuatan slide show ini sangatlah mudah apabila kita megerti parameter
apa yang harus kita panggil dari bootstrap.Di bawah ini adalah nama class dan fungsinya yang digunakan untuk membuat Slideshow atau Carousel :
- <div id="myCarousel" class="carousel slide" data-ride="carousel"> pemanggilan carousel slide dari file bootstrap
- class="carousel-indicators" mengindikasi carousel
- data-target="#myCarousel" memanggil myCarousel
- data-slide-to="1" melakukan slide urut dari gambar 1
- class="left carousel-control" sebagai control dari slideshow carousel
Di bawah ini adalah contoh script caraousel / slideshow yang saya buat :
<!DOCTYPE html>
<html>
<head>
<title>Carousel 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>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
h1 {
font-family: raleway;
color: #20B2AA;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>SlideShow Gambar / Caraousel Bootstrap </h1>
</center>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="gambar/1.jpg" alt="Gambar1" width="1000" height="400">
</div>
<div class="item">
<img src="gambar/2.jpg" alt="Gambar2" width="1000" height="400">
</div>
<div class="item">
<img src="gambar/3.jpg" alt="Gambar3" width="1000" height=400>
</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>
</body>
</html>
- KESIMPULAN
wassalamualaikum.wr.wb
0 komentar:
Posting Komentar