Tutorial Bootstrap: Slider
Bootstrap merupakan salah satu framework yang banyak digunakan oleh kalangan developer web karena menyajikan fitur yang banyak.
Apakah anda pernah melihat sebuah website berita yang menampilkan gambar bergerak ?. Dalam web, teknologi tersebut dinamakan slider atau slideshow. Untuk membuat slider dengan Bootstrap, pastikan anda telah mendownload Bootsrap.
Buatlah sebuah file yang bernama index.html yang berisi kode sebagai berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contoh Slider Pada Bootsrap</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="bootstrap/css/custom.css"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Detailed Technology Center</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="http://ilmu-detil.blogspot.com/search/label/Bahasa%20Perancis" target="_blank">Learn French</a></li> <li><a href="http://ilmu-detil.blogspot.com/search/label/Pemrograman%20Web" target="_blank">All About Web</a></li> <li><a href="http://ilmu-detil.blogspot.com/search/label/Ulasan" target="_blank">Review</a></li> </ul> </div> </div> </nav><br><br> <div class="jumbotron"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> <!-- 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" > <div class="item active" align="center"> <img src="bootstrap/image/cover_cawo1.jpg" alt="DTC" > <div class="carousel-caption"> <h3>Caption Text</h3> </div> </div> <div class="item" align="center"> <img src="bootstrap/image/logo_edit.jpg"" alt="Cawo-cawo" align="center"> <div class="carousel-caption"> <h3>Caption Text</h3> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- Carousel --> </div> <hr><br><br><br><br><br><br><br><br><br><br> <address> <p class="pull-right"> <strong>Detailed Technology Center</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </p><br><br><br><br> </address> <footer> <p class="pull-right"><a href="#">Back to top</a></p> <p>© 2014 DTC. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </body> </html>
Untuk melihat demonya, klik Live Demo
Untuk mempermudah anda dalam bereksperimen, download Scriptnya
Anda dapat melihat contoh lain dari pembuatan slider, klik Disini.
Sekarang timbul pertanyaan, slider yang contoh diatas kan bersifat statis. Bagaimana caranya membuat slider dinamis yang gambar, judul dan kontennya diambil dari database. Silahkan simak pembahasannya di : Membuat Web Headline News Dinamis dari database
