> For the complete documentation index, see [llms.txt](https://docs.qore.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qore.dev/component/media/carousel.md).

# 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="/files/BNUJmd0XPIJpsop25Udq" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ZIPzjvFfugRlOWxAYibz" 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="/files/erzYMjVSPxGAQDWdYKdZ" alt=""><figcaption></figcaption></figure>