Dalam bootstrap, terdapat fasilitas untuk membuat silde. Tanpa harus membuat slide dari awal, tentu hal ini dapat memudahkan kita dalam membuat tampilan website . Untuk membuat silde dengan bootstrap, pertama-tama download bootstrap di getbootstrap.com . Kemudian Buat folder baru dengan nama latihan . Lalu Extract file bootstrap kedalam folder latihan .
Kemudian buat file baru dengan nama slide_bootstrap.html . Simpan file ke dalam folder .
Lalu tambahkan script di bawah ini ke dalam file latihan .
<!DOCTYPE html>
<html>
<head>
<title>Slide Bootstrap</title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
</head>
<body>
</body>
</html>
Lalu pada bagian tag <body> tambahkan script di bawah ini
<div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active”></li>
<li data-target=”#carousel-example-generic” data-slide-to=”1″></li>
<li data-target=”#carousel-example-generic” data-slide-to=”2″></li>
</ol>
<!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active”>
<img src=”…” alt=”…”>
<div class=”carousel-caption”>
…
</div>
</div>
<div class=”item”>
<img src=”…” alt=”…”>
<div class=”carousel-caption”>
…
</div>
</div>
<div class=”item”>
<img src=”…” alt=”…”>
<div class=”carousel-caption”>
…
</div>
</div>
</div>
<!– Controls –>
<a class=”left carousel-control” href=”#carousel-example-generic” 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=”#carousel-example-generic” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
Lalu copy beberapa file gambar ke dalam folder latihan . Kemudian update script pada bagian tag <img> seperti di bawah ini
Maka saat di jalankan d browser berikut tampilan nya
Created by : Muhammad Basir
