Membuat Slider Bootstrap Yang Responsive

Membuat Slider Bootstrap Yang ResponsiveShare on FacebookTwitterTwitter
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.

SliderBootstrap

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://4.bp.blogspot.com/-MNX-J_t01VE/VqoxQXj_adI/AAAAAAAAAVc/P4DdCK5UfHc/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="http://2.bp.blogspot.com/-ALtD6Bm6UMs/VqoxO7UHsUI/AAAAAAAAAVQ/uBjZO0kMhUM/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://1.bp.blogspot.com/-p21ay8Fj1hI/VqoxQNDBq2I/AAAAAAAAAVY/WbR_j-6wsMA/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://2.bp.blogspot.com/-bDWPKal5PCc/VqoxQ_CeeYI/AAAAAAAAAVk/JJyu2hZ9VjY/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 ^_^