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.
Tidak ada komentar:
Posting Komentar