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:

gambar 1 - contoh carousel slider bootstrap

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/wp-content/uploads/operasi-menyebabkan-stroke-posciety.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.posciety.com/wp-content/uploads/faktor-penyebab-gejala-diabetes-posciety.jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://www.posciety.com/wp-content/uploads/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 !


Jangan Lupa Share !!!

33
7 shares, 33 points

Apa Reaksimu ?

Bingung Bingung
9
Bingung
Kesal Kesal
7
Kesal
OMG OMG
9
OMG
Takut Takut
8
Takut
Keren Keren
6
Keren
Sedih Sedih
1
Sedih
Posciety Tech

Pro

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki