Tutorial Bootstrap Part 23 : Membuat Carousel di Bootstrap

Assalamu'alaikum W. W.

Abdul Hafid Gunawan - Hai Sobat setia SC Blog, Alhamdullilah sudah sampai Tutorial Bootstrap Part 23 ini, saya masih di berikan kesempatan untuk membagikan Ilmu saya ke teman" setia SC Blog.

PENGERTIAN

SleepingCodings - Carousel merupakan sebuah Fitur Bootstrap, yang fungsinya slideshow gambar, dan dapat memberikan keterangan dalam gambar tsb.

LATAR BELAKANG

Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

MAKSUD DAN TUJUAN

 - Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.

ALAT DAN BAHAN

- Text Editor

PEMBAHASAN

Keterangan Class : 

1. Class .carousel-indicator digunakan untuk membuat indicatorsnya, yang nantinya menandai gambar ini pada indicator ke berapa.
2. Class .carousel-inner digunakan untuk membuat Slideshownya.
3. Class .carousel-item digunakan untuk item yang akan di slideshowkan.
4. Class .carousel-caption digunakan untuk memberikan keterangan di atas gambar tsb.
5. Class .carousel-control-prev digunakan untuk kembali ke slideshow sebelumnya
6. Class .carousel-control-next digunakan untuk menuju ke slideshow selanjutnya.

Keterangan Atribut :

1. Atribut id="carouselx" digunakan untuk perujuk atribut data-target.
2. Atribut data-ride digunakan untuk mendeklarasikan data apa yang akan di tampilkan.
3. Atribut data-target digunakan untuk merujuk atribut yang dijadikan perujuk.
4. Atribut data-slide-to digunakan untuk penomoran + pengaturan ada berapa indicators yang akan di tampilkan  dan digunakan.
5. Atribut data-slide="prev" & "next" digunakan untuk melanjutkan ke slide selanjutnya dan kembali ke slide sebelumnya.

• Membuat Carousel

• Membuat Carousel + Caption

KESIMPULAN

Dengan adanya Bootstrap Carousel memudahkan kita untuk membuat sebuah slideshow gambar dengan hanya memanggil classnya saja,

REFERENSI

- www.w3schools.com/bootstrap4/bootstrap_carousel.html

Wassalamu'alaikum W. W.