Membuat Slider Bootstrap Yang Responsive

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.


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="http://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="http://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="http://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="http://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="http://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 ^_^

Related Artikel Membuat Slider Bootstrap Yang Responsive

27 comments:

  1. terima kasih banyak-banyak, it's work like a charm

    ReplyDelete
  2. Replies
    1. sama sama gan, selamat datang di blog ane ^_^

      Delete
  3. sip gan, thanks ya...ane nyari2 tutorial yng kyk gini

    ReplyDelete
  4. gan kok ukuran untuk mengatur besar gambarnya tidak berfungsi yaa

    ReplyDelete
    Replies
    1. pastikan agan meletekkan codenya di bawah code bootstrap,
      dan dalam satuan prosentase bukan pixel ^_^

      Delete
  5. css nya kalo bisa di sertakan juga biar bisa lebih paham

    ReplyDelete
  6. di template aku gak muncul, yang ada malah folder baru-_- kenapa ya?

    ReplyDelete
  7. bagaimana membuat slider hilang saat ditampilkan di mobile?

    ReplyDelete
    Replies
    1. disembunyikan saja pakai code CSS gan,
      misal slider sembunyi kalau ukuran layar kurang dari 767px,
      code CSS jadi seperti ini :

      <style>@media (max-width: 767px) {.slide{display:none}}<style/>

      Delete
    2. Makasih mas penjelasannya.

      Maaf mas nanya lagi,
      mas nya pakek hosting apa ya klo boleh tau, terus biar dapet domain dot com itu gimana mas caranya?

      maklum mas baru belajar ngoding. hehehe

      Delete
    3. Ane gak pakai hosting berbayar gan,
      ane hanya pakai blogspot dengan custom domain,
      jadi cuma domainnya aja yang beli.

      cara custom domain blogger bisa agan lihat di sini :
      https://support.google.com/blogger/answer/55374?hl=id

      Delete
    4. makasih mas infonya, membantu sekali. . . ^_^
      sukses terus ngeblognya

      Delete
  8. cara biar ga auto nge-slide gmn ya gan ?

    ReplyDelete
    Replies
    1. Mudah gan, tinggal tambahkan code
      data-interval="false"

      jadi pada point ke 2 diatas nanti code paling atas jadi seperti ini :

      <div id="WJSlider" class="carousel slide" data-ride="carousel" data-interval="false">

      Delete
    2. makasih gan , semoga sukses selalu

      Delete
  9. makasih gan, sangat sangat membantu :)

    ReplyDelete
  10. Agan mau nanya nih gan
    Klo buat slider di postingan gimana gan caranya?
    Makasi gan

    ReplyDelete
    Replies
    1. untuk postingan blogger, agan pilih metode post html
      lalu masukkan code slidernya disitu gan

      Delete
  11. Cara Membuat Slider Carousel Otomatis Di Blogspot sini masuk work http://bit.ly/2mRgj6E

    ReplyDelete
  12. Danke banya bro...
    Datanya sangat membantu,,,

    ReplyDelete
  13. kalau tidak memanggil css bootstrap yang biasa disimpan dibawah head, kira-kira bisa gak mas ? soalnya sering terganggu loading halamannya karena terlalu banyak css bawaan bootstrap

    terima kasih

    ReplyDelete
    Replies
    1. css bootstrap itu salah satu bagian utamanya gan, agan coba pakai bootstrap yang minimalis saja

      Delete
  14. gan mengatur lebar slydernya gimana ya ?

    ReplyDelete