Cara Membuat Slide Show / Carousel Dengan Bootstrap

Bissmillahirahmanirrahim - Yeppp kali ini saya akan share cara membuat sebuah slide show atau carousel pada sebuah website yang pastinya membuat website tampil lebih menarik dan elegan dan sudah full responsive karena kita menggunakan framework bootstrap.

Apa itu bootstrap ?

Sebelumnya akan saya bahas sedikit mengenai bootstrap, bootstrap merupakan sebuah framework css yang dibuat untuk mempermudah dalam mendesign tampilan sebuah website, karena bootstrap telah menyediakan beragam class class yang bisa kita pakai dalam membangun tampilan sebuah website. Ini cocok sekali bagi kalian yang senang sekali dalam web development terutama di sisi design.

Apa yang dibutuhkan untuk mengikuti tutorial ini ?

• Pastikan kalian sudah memiliki file bootstrap nya,
• Buat sebuah project baru atau yang sudah lama yang sudah terkait dengan bootsrap,
• Usaha Amati - Tiru - Modifikasi.

Langsung saja kita ke Praktek
Oh iya sesuaikan link gambarnya dengan file gambar kalian supaya tampak hasilnya.

Slide Only

<div class="carousel slide" data-ride="carousel" id="carouselExampleSlidesOnly">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="First slide" class="d-block w-100" src="..." />
    </div>
<div class="carousel-item">
<img alt="Second slide" class="d-block w-100" src="..." />
    </div>
<div class="carousel-item">
<img alt="Third slide" class="d-block w-100" src="..." />
    </div>
</div>
</div>

Slide With Control

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Slide With Indicator

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Begitulah kira kira cara menggunakan caroulsel dari bootstrap baik itu versi 3 ataupun 4, kalian juga dapat memvariasikan carouselnya sesuai dengan hati kalian silahkan. Mungkin sekian saja tutorial pada slideshow atau carousel menggunakan bootstrapnya. Jangan males untuk menambah ilmu.