# Carousel

Cara menambahkan Carousel component

Berikut langkah-langkah untuk menambahkan carousel *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih carousel *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FEWkcPq38pCQMvvc41Kad%2Fmed6.png?alt=media&#x26;token=6e26463b-c5f5-4d35-baf9-be29968dad87" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka carousel *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2Fwvah8rbk6Xz5btErTM4R%2Fmed66.png?alt=media&#x26;token=6be24a49-3ad1-47ee-8152-9fb9f029cc18" alt=""><figcaption></figcaption></figure>

Properties dari carousel component adalah&#x20;

Data :

* Source : tabel pada qore data yang digunakan sebagai sumber data

Design :&#x20;

* Style : mengatur tampilan carousel, apakah full atau menggunakan frame
* Round corner : mengatur tampilan carousel, apakah sudut-sudutnya rounded
* Autoplay : mengatur animasi carousel, apakah sliding gambar dimainkan secara otomatis

All Device :

* All Device : jika gambar ingin ditampilkan di semua tipe device dengan sumber gambar yang sama, maka aktifkan toggle
* Images : sumber gambar, berupa baris data pada tabel qore data

Phone :

* Images : sumber gambar yang ditampilkan jika device adalah phone, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah phone, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device phone, apakah fill ataupun fit&#x20;

Tablet :

* Images : sumber gambar yang ditampilkan jika device adalah tablet, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah tablet, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device tablet, apakah fill ataupun fit&#x20;

Dekstop :

* Images : sumber gambar yang ditampilkan jika device adalah dekstop, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah dekstop, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device dekstop, apakah fill ataupun fit&#x20;

Berikut contoh carousel yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FnxaOXwQw4EnP6d7w9DXV%2Fmed666.png?alt=media&#x26;token=081431c1-daee-43f0-92a2-f8c94332bfa9" alt=""><figcaption></figcaption></figure>