Tutorial kali ini kita akan belajar membuat tampilan slider responsive menggunakan bootstrap, agar image slider kita bisa berubah menyesuaikan ukuran layar, disini ane memakai yang carousel slide.
Cara membuatnya tidak terlalu sulit kok, kita hanya membutuhkan, jquery dan bootstrap, jadi kalau dalam template atau blog yang sekarang agan pakai itu sudah ada bootstrap atau jquery, agan bisa mengabaikan code 1 ( code HTML dalam head ) yang ane berikan dibawah ini :
Perhatikan pada bagian <style> code diatas, itu ane buat lebar gambar hanya 80% , agar tombol next ( > ) dan prev ( < ) bisa terlihat, code itu bisa agan rubah menjadi 100% agar tidak ada space disamping kanan dan kirinya, atau silahkan modifikasi sesuai selera agan.
Berikut ini full code yang ane pakai sebagai DEMO, dan bisa agan gunakan sebagai contoh live :
1. Buka notepad
2. Copy dan paste code dibawah ini
3. save dengan nama slider.html (ingat ya gan, harus xxx.html jangan xxx.txt ^_^)
OK gan, selamat mencoba dan semoga bermanfaat,
ane tunggu komen dan masukkannya ^_^
Contoh hasilnya akan seperti ini : Demo Bootstrap Slider
Cara membuatnya tidak terlalu sulit kok, kita hanya membutuhkan, jquery dan bootstrap, jadi kalau dalam template atau blog yang sekarang agan pakai itu sudah ada bootstrap atau jquery, agan bisa mengabaikan code 1 ( code HTML dalam head ) yang ane berikan dibawah ini :
1. Code HTML dalam Head
Letakkan code berikut di antara <head> sampai </head>.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>
Perhatikan pada bagian <style> code diatas, itu ane buat lebar gambar hanya 80% , agar tombol next ( > ) dan prev ( < ) bisa terlihat, code itu bisa agan rubah menjadi 100% agar tidak ada space disamping kanan dan kirinya, atau silahkan modifikasi sesuai selera agan.
2. Code HTML dalam Body
Silahkan letakkan code berikut di dalam body, atau pada halaman yang ingin ditambah slider.
<div class="container">
<br>
<div id="WJSlider" class="carousel slide" data-ride="carousel">
<!-- Indikator yang bulat bulat ituloh gan-->
<ol class="carousel-indicators">
<li data-target="#WJSlider" data-slide-to="0" class="active"></li>
<li data-target="#WJSlider" data-slide-to="1"></li>
<li data-target="#WJSlider" data-slide-to="2"></li>
<li data-target="#WJSlider" data-slide-to="3"></li>
</ol>
<!-- Wrapper untuk slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="url-gambar1.jpg" alt="slide1" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 1</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
</div>
</div>
<div class="item">
<img src="url-gambar2.jpg" alt="slide2" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 2</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
</div>
</div>
<div class="item">
<img src="url-gambar3.jpg" alt="slide3" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 3</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
</div>
</div>
<div class="item">
<img src="url-gambar4.jpg" alt="slide4" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 4</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke empat.</p>
</div>
</div>
</div>
<!-- Kode untuk Navigasi -->
<a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Kembali</span>
</a>
<a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Lanjut</span>
</a>
</div>
</div> Berikut ini full code yang ane pakai sebagai DEMO, dan bisa agan gunakan sebagai contoh live :
1. Buka notepad
2. Copy dan paste code dibawah ini
3. save dengan nama slider.html (ingat ya gan, harus xxx.html jangan xxx.txt ^_^)
Full code HTML contohmembuat slider yang responsive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider Bootstrap Webjalanan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>
</head>
<body>
<div class="container">
<br>
<div id="WJSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#WJSlider" data-slide-to="0" class="active"></li>
<li data-target="#WJSlider" data-slide-to="1"></li>
<li data-target="#WJSlider" data-slide-to="2"></li>
<li data-target="#WJSlider" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFdcGvFzxjP3d5HNe4t8T4j6W6_M_4WfD0NZNcP1b5rsIK7d5yr9N-NZYVeMAVLuqkT_3xuESqxipqdTfSA8obbd8xDRJmkN8QhCRZQkmiWfcgar0pHwEeAdgW9QGs-ppoDVtu-6yqltT/s1600/WJslider1.jpg" alt="slide1" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 1</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
</div>
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAMYxAncU-7W8m8mHuzsLOikRXesvXSnC1CnGG8fr7fSxRcnlB_AtrrYL7e-140L51v7C-0sY0cHxo_8sw6Lycikxz7yE1jqlojB9Gog8M6cIWhTs3nfLzgWBgAPGn4qe-Om3xrUE5xiI/s1600/WJslider2.jpg" alt="slide2" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 2</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
</div>
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvFcGXO4LCmTW3BfBAhJinwdaeZb2_GBMAanYkntYHcWT3sUdiH1WoN53Kn4Ot7zAiuguqlmbr6yppK1nGeEPzriii4drm7XVqpob4Py6OUP3FJj9QyDn10gv0ZYBMP4wTMNkWU3rUWxR/s1600/WJslider3.jpg" alt="slide3" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 3</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
</div>
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJREipdFWy17E7GdsxbbeSDmYNk61RJlnQsPyJrRgpPR1Ona4cXzQYmI6URk-YGcjfVDgr068C_OgXSH9442GiBXaZwHofXZVcPvMCmvv40excU1Qx6hhA5TwBlo7JE4EXYjeRpA14Yx4n/s1600/WJslider4.jpg" alt="slide4" width="460" height="345">
<div class="carousel-caption">
<h3>Judul Gambar 4</h3>
<p>Ini adalah deskripsi singkat dari judul gambar yang ke empat.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Kembali</span>
</a>
<a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Lanjut</span>
</a>
</div>
</div>
</body>
</html>
OK gan, selamat mencoba dan semoga bermanfaat,
ane tunggu komen dan masukkannya ^_^
Related Artikel Membuat Slider Bootstrap Yang Responsive