Tutorial Belajar Bootstrap: Membuat Carousel/Slideshow Dengan Bootstrap
Carousel atau biasa sering kita kenal dengan slideshow merupakan proses untuk menampilkan gambar yang diberikan efek slideshow, sehingga gambar yang tampilan akan secara otomatis bergantian, slideshow salah satu komponen yang banyak digunakan pada website saat ini serta memiliki peran penting pada sebuah website.
Carousel atau slideshow ini biasa diletakan pada halaman depan, dengan menampilkan desain yang menarik ataupun berbagai promo sehingga menarik perhatian pengunjung website.
Untuk membuat slideshow secara manual agak sulit, maka dari itu cara mudah membuat slider adalah dengan bantuan Bootstrap, disini saya menggunakan Boostrap versi 3.4, ok langsung saja kita masuk di tutorial.
Pertama kita buat folder untuk menyimpan gambar yang akan kita tampilkan pada slider, disini gambar saya masukan pada folder img, kemudian sediakan beberapa gambar yang akan kita tampilkan pada slider masukan pada folder img, kemudian buat file index.html masukan kode berikut :
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css">
<title>Membuat Corausel 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>
</head>
<body>
<div class="col-md-8 col-md-offset-2">
<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="img/image1.jpg" alt="...">
<div class="carousel-caption">
Selamat datang di blog ilmuweb.net
</div>
</div>
<div class="item">
<img src="img/image2.jpg" alt="...">
<div class="carousel-caption">
Membahas berbagai tutorial tentang pemprograman website
</div>
</div>
<div class="item">
<img src="img/image3.jpg" alt="...">
<div class="carousel-caption">
Belajar PHP, Bootstrap, MySql
</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>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Dari koding diatas saya memasukan tiga buah gambar dengan efek slideshow, kemudian masukan nama file beserta ekstensi gambar, dan ukuran gambar yang sama agar gambar rapi, apabila gambar dengan ukuran berbeda maka gambar slideshow akan berubah dari gambar satu ke gambar lainya.
letak gambar slide saya taruh pada folder img.
<img src="img/image1.jpg" alt="...">
Untuk menambah keterangan slider masukan pada tag berikut :
<div class="carousel-caption">
Membahas berbagai tutorial tentang pemprograman website
</div>
Pada script ini Carousel kita set posisi tengah dengan menggunakan 8 grid, disini teman-teman tinggal disesuaikan dengan kebutuhan tinggal rubah ukuran grid sistem sesuai kebutuhan :
<div class="col-md-8 col-md-offset-2">
Untuk memahami grid system pada bootstrap teman-teman bisa mengunjungi tutorial sebelumnya pada blog ini tentang sistem grid pada bootstrap
Koding hasil tampilan corousel/slideshow yang kita buat ini sekaligus dengan boostrapnya dan javascript librari teman-teman bisa Download file.
Terimakasih telah membaca sampai akhir tulisan, sekian tutorial Cara Membuat Carousel/Slideshow dengan Bootstrap, semoga bermanfaat, salam sukses penuh keberkahan 🙂
