Cara Membuat Carousel Bootstrap

Disebut Carousel karena cara kerjanya yang mirip dengan korsel / komedi putar, memutar bergantian setiap elemen pada bagian (tampilan) tertentu. Misalnya ada 10 elemen, maka perlu memutar satu persatu hingga mencapai ke tampilan terakhir, dan akan kembali lagi ke elemen ke 1.

Carousel akan memperlihatkan (show) dengan cara mengusapnya ke samping (default) maka bisa juga disebut sebagai slideshow. Jika membangun website menggunakan Bootstrap, membuat Carousel bukanlah hal yang sulit. Cukup manfaatkan beberapa class yang telah disediakan. Tampilan carousel dapat disesuaikan ukurannya sesuai masing-masing desain yang diinginkan, berikut ini tampilan defaultnya yang menyerupai slider:

ads by posciety

Terdapat indikator di bagian bawah carousel, panah kanan dan kiri untuk menuju ke slide selanjutnya dan sebelumnya. Gunakan struktur kode berikut untuk membuat carousel default:

<h2>Carousel Bootstrap - Posciety.Com</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.posciety.com/file/operasi-menyebabkan-stroke-posciety.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.posciety.com/file/faktor-penyebab-gejala-diabetes-posciety.jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://www.posciety.com/file/kenapa-saldo-google-adsense-minus-posciety.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Sebelumnya</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Selanjutnya</span>
    </a>
  </div>

Seperti yang terlihat, panah kanan dan kiri itu menggunakan ikon dari Glyphicons yang merupakan salahsatu bagian dari Bootstrap 3. Jika menggunakan Bootstrap 4, perlu menyesuaikan ikon terlebih dahulu karena terdapat perbedaan antara Bootstrap 3 & Bootstrap 4.

Simpan dan lihat hasilnya !