Cara Membuat Slideshow Atau Carousel Dengan Bootstrap

Cara Membuat Slideshow Atau Carousel Dengan Bootstrap

Slideshow atau Carousel adalah sebuah elemen/fitur pada bootstrap yang berguna untuk menampilkan gambar/content dengan efek slide.

Slideshow sudah banyak digunakan di website, biasanya diletakan di header.

Dengan Slideshow anda dapat menampilkan berbagai informasi dengan mudah.

Langsung saja berikut tutorialnya.

Membuat Slideshow

Pertama kita akan meload css bootstrap, dan juga javascriptnya.

Disini saya sudah menyiapkan dua buah gambar yaitu bg.jpg dan daft.jpg yang nanti akan dijadikan slidenya.

Lalu kita mulai dengan menuliskan kode program seperti berikut.

<!DOCTYPE html>
<html>
<head>
 <title>Slideshow</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="assets/image/bg.jpg" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="assets/image/daft.jpg" class="d-block w-100" alt="...">
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>

<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Save lalu buka dibrowser. Maka akan muncul slideshownya.

Menambah Captions Dan Indicator

Anda juga dapat menambahkan captions dan indicator.

Caranya dengan menambahkan div class carousel-caption di bawah tag img.

Lalu kita masukan teks captions didalamnya.

Untuk indicator kita menambahkanya di bagian atas dengan tag ol dan class yang disediakan bootstrap.

Berikut codenya.

<!DOCTYPE html>
<html>
<head>
 <title>Slideshow</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>

 <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="assets/image/bg.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Padang Pasir</h5>
        <p>Ini adalah padang basir</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="assets/image/daft.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Daft Punk</h5>
        <p>Ini adalah daft punk</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 <script src="js/jquery-3.4.1.slim.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</body>
</html>

Save dan berikut hasilnya.

Penutup

Untuk mengatur durasi efek dan sebagainya, menggunakan javascript. Dan akan saya jelaskan lain waktu.

Sekian dari saya, semoga bermanfaat.

Related Post

Comments

X