Cara Membuat Slide Rebonsive Bootstrap ~ Belajar Ngeblog

Cara Membuat Slide Rebonsive Bootstrap

Cara membuat Slider itu tidak terlalu sulit kita hanya membutuhkan Jquery dan Bootstrap jadi dalam tamplate atau blog yang sekarang yang kamu pakai sekarang Jquery atau Bootstrap asalahkan kamu mengabaikan kode satu ( code dalam HTML head) yang akan saya berikan simak dengan baik langkah- langkah berikut :

Langkah pertama letakkan kode berikut dari <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>

Dan perhatikan pada bagian<style> saya buat lebar gambar hanya 80% agar tombol (<) next dan (>) prev bisa terlihat kode itu bisa anda rubah menjadi 100% agar tidak ada Spaci di samping kanan dan kirinya kamu juga memodifikasi sesui dengan selera kamu.

2. Langkah kedua kode HTML dan Body
silahkan kode berikut ini di dalam body atau pada halaman yang ingin ditambahkan 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>