Home bootstrap Cara membuat carousel dengan bootstrap

Cara membuat carousel dengan bootstrap

01:10:00 |
Hallo teman-teman bertemu lagi nih bersama saya, mudah-mudahan pengunjung disini selalu dalam keadaan sehat ya, kemarin-kemarin kita sudah membahas tentang Cara menghapus widget yang tidak bisa di hapus di blog.Di hari ini saya akan membuat sebuah tutorial bagaimana cara membuat carousel dengan bootstrap, pada tutorial bootstrap yang lalu kita sudah membahas tentang Cara membuat icon dengan Glyphicon Bootstrap.Mungkin disini sobat sudah tidak asing lagi dengan carousel, carousel atau biasa disebut dengan slideshow adalah sekumpulan foto yang bisa bergerak secara otomatis dan juga bisa bergerak dengan sentuhan cursor mouse, carousel atau slideshow ini banyak sekali digunakan pada website pribadi maupun website perusahaan agar website mereka terlihat lebih indah dan bisa menghipnotis pengunjung.Oke sekarang mari kita lanjut ke pembahasan.

Cara membuat carousel dengan bootrap

Sebelum kita membuat carousel anda harus terlebih download bootstrap-nya terlebih dahulu.Silahkan kunjungi disini.

oke mari kita lanjut, setelah sobat download bootstrap nya sobat harus menyediakan gambar, minimal 3 gambar, seperti pada gambar di bawah ini.



oke kita lanjut, setelah kita menyediakan 3 gambar mari kita buat carousel nya dengan sobat mengcopy script yang ada di bawah ini

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tutorial Membuat Carousel</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
       <div class="container">  
  <div class="col-md-8 col-md-offset-2">
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
   
    <ol class="carousel-indicators">
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
     <li data-target="#myCarousel" data-slide-to="1"></li>
     <li data-target="#myCarousel" data-slide-to="2"></li>  
    </ol>

    <div class="carousel-inner" role="listbox">
     <div class="item active">
      <img src="gambar/bckgrnd.jpg" alt="">
      <div class="carousel-caption">
       <h2>Biongo Attacker</h2>
       <p>Cara membuat carousel dengan bootstrap</p>
      </div>
     </div>
     <div class="item">
      <img src="gambar/laptop.jpg" alt="">
      <div class="carousel-caption">
       <h2>Biongo Attacker</h2>
       <p>Cara membuat carousel dengan bootstrap</p>
      </div>
     </div>
     <div class="item">
      <img src="gambar/tes.jpg" alt="">
      <div class="carousel-caption">
                            <h2>Biongo Attacker</h2>
       <p>Cara membuat carousel dengan bootstrap</p>
      </div>
     </div>    
    </div>

    <!-- membuat panah next dan previous -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
    </a>
   </div>
  </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

dan setelah sobat copy script di atas, silahkan di save dan lihat hasilnya.
oke sekian tutorial yang singkat ini sekian terima kasih.Jika ada yang masih membingungkan dalam tutorial ini silahkan memberikan komentarnya.
Next
« Next Post
Previous
Prev Post »

0 komentar

Mohon untuk para pengunjung agar supaya meninggalkan komentar setelah membaca.Komentar anda sangat bermanfaat bagi kemajuan blog ini.

"Janganlah menjadi seorang pembaca yang pendiam tanpa meninggalkan jejak sedikit pun"

Subscribe to: Post Comments (Atom)