Kamis, 16 Maret 2017

Membuat Slideshow / Carousel gambar dengan Boottsrap

   No comments



Assallamuallaikum Wr Wb ,.
       Halo kawan kawan di kesempatam kali ini saya akan sedikit berbagi tutorial tentang Membuat Carousel / Slideshow gambar dengan bootstrap. Pembuatan slide show ini sangatlah mudah apabila kita megerti parameter apa yang harus kita panggil dari bootstrap.

      Di bawah ini adalah nama class dan fungsinya yang digunakan untuk membuat Slideshow atau Carousel :
  • <div id="myCarousel" class="carousel slide" data-ride="carousel"> pemanggilan carousel slide dari file bootstrap
  • class="carousel-indicators" mengindikasi carousel 
  • data-target="#myCarousel" memanggil myCarousel  
  • data-slide-to="1" melakukan slide urut dari gambar 1
  • class="left carousel-control" sebagai control dari slideshow carousel
      Sebeleum memulai membuat slideshow / carousel letakkan gambar yang akan di jadikan bahan slideshow dalam satu directory.


Di bawah ini adalah contoh script caraousel / slideshow yang saya buat :

<!DOCTYPE html>
<html>
<head>
    <title>Carousel Bootstrap  </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>    
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
             width: 100%;
             margin: auto;
        }
        h1 {
            font-family: raleway;
            color: #20B2AA;
        }
    </style>
</head>

<body>
<div class="container">
  <center>
  <h1>SlideShow Gambar / Caraousel Bootstrap </h1>
  </center>
  <br>
  <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>


    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="gambar/1.jpg" alt="Gambar1" width="1000" height="400">
      </div>

      <div class="item">
        <img src="gambar/2.jpg" alt="Gambar2" width="1000" height="400">
      </div>
    
      <div class="item">
        <img src="gambar/3.jpg" alt="Gambar3" width="1000" height=400>
      </div>

      <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>
</body>
</html> 

       Dalam penggunaan carousel / slide show bootstrap akan menjadi otomatis responsive pada saat di buka di perangkat/media lain yang ukuranya lebih kecil maka akan otomatis menyesuaikan .

  • KESIMPULAN
       Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain.
wassalamualaikum.wr.wb

0 komentar:

Posting Komentar