Minggu, 21 Januari 2018

Bootstrap : Carousel


1. Pengertian
      Carousel yaitu komponen yang berjalan melalui elemen, seperti slideshow.
2. Latar belakang
      Carousel sendiri tidak didukung dengan benar di internet explorer 9 dan sebelumnya(karena mereka menggunakan transisi dan animasi untuk mendapatkan efej slide).
3. Maksud dan Tujuan
     Kita dapat membuat carousel yang sejenis dengan slideshow tersebut dengan Bootstrap.
4. Hasil yang diharapkan
      Dapat mempraktekan pembuatan carousel dengan Bootstrap.
5. Alat dan bahan
      Laptop
      Browser
      Teks editor
6. Uraian
     Berikut ini adalah praktek yang saya lakukan:
 


     Terluar <div>:
Carousels memerlukan penggunaan id (misalkan id="myCarousel" ) agar kontrol korsel berfungsi dengan baik. class="carousel" menentukan bahwa <div> berisi sebuah korsel. Kelas .slide menambahkan efek transisi dan animasi CSS, yang membuat item bergeser saat menampilkan item baru. Abaikan kelas ini jika Anda tidak menginginkan efek ini. Atribut data-ride="carousel" memberitahu Bootstrap untuk mulai menghidupkan korsel segera saat halaman dimuat.

      Bagian "Indikator":
Indikatornya adalah titik-titik kecil di bagian bawah setiap slide (yang menunjukkan berapa banyak slide yang ada di dalam korsel, dan slide mana yang pengguna lihat saat ini). Indikator ditentukan dalam daftar pesanan dengan .carousel-indicators. Atribut data-target menunjuk ke id dari korsel. Atribut data-slide-to menentukan slide mana yang akan digunakan, saat mengklik titik tertentu.

      Bagian "Wrapper for the slide":
Slide yang ditentukan dalam <div> dengan kelas .carousel-inner. Isi setiap slide didefinisikan dalam <div> dengan kelas .item . Ini bisa berupa teks atau gambar. Kelas .active harus ditambahkan ke salah satu slide. Jika tidak, korsel tidak akan terlihat.

      Bagian "Kontrol kiri dan kanan":
Kode ini menambahkan tombol "kiri" dan "kanan" yang memungkinkan pengguna untuk bolak-balik antara slide secara manual. Atribut data-slide menerima kata kunci "prev" atau "next" , yang mengubah posisi slide relatif terhadap posisi saat ini.
7. Hasil yang didapatkan
     Dapat membuat carousel pada bootstrap.
8. Referensi


Tidak ada komentar:

Posting Komentar