Membuat Slideshow / Carousel gambar dengan Boottsrap

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 .

Tampilan pada smarthphone

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.