Carousel — slider gambar

Komponen Carousel dari NexaJS menampilkan deretan slide ber-gambar dengan opsi autoplay, interval, indikator titik (pagination), geser manual, dan gaya wadah. Layar demo memakai react-native untuk kerangka (SafeAreaView, ScrollView, Switch, TouchableOpacity) serta state untuk menguji autoplay dan tinggi bersama pada dua carousel sekaligus.

Alur penggunaan di aplikasi

Pendaftaran route — Default export modul layar didaftarkan sebagai "Carousel" di MenuComponents (judul: "Carousel").
Navigasi — navigation.navigate("Carousel"). Konfigurasi route · MenuComponents.
Render — SafeAreaView → ScrollView → blok kontrol (switch autoplay, pemilih tinggi) → beberapa <Carousel /> dengan dataset berbeda, lalu teks referensi fitur dan placeholder gambar.

Cuplikan cepat

Data + Carousel

import { Carousel, Colors } from "NexaJS";

const data = [
  { image: { uri: "https://picsum.photos/id/1018/400/200" }, title: "Slide 1" },
  { image: { uri: "https://picsum.photos/id/1015/400/200" }, title: "Slide 2" },
];

<Carousel
  data={data}
  height={200}
  auto={true}
  interval={3000}
  indicatorColor={Colors.primary || "#007bff"}
  style={{ borderRadius: 10 }}
/>

Manual tanpa autoplay

<Carousel
  data={data}
  height={180}
  auto={false}
  indicatorColor="#4ECDC4"
  style={{ borderRadius: 8 }}
/>

Struktur item `data`

Setiap elemen array adalah objek dengan image dan title. Untuk gambar jaringan, image berbentuk { uri: "https://..." }. Judul dipakai sebagai overlay teks pada slide (perilaku tampilan mengikuti implementasi NexaJS). Anda bisa memakai layanan placeholder seperti Picsum (parameter query grayscale, blur, seed) untuk prototipe.

Properti `Carousel` pada demo

Prop	Peran
`data`	Array slide `{ image, title }`.
`height`	Tinggi area carousel (angka, px logis). Demo menguji 150 / 200 / 300 bersama state.
`auto`	Boolean autoplay — dihubungkan ke `Switch` pada referensi.
`interval`	Jeda antar slide saat autoplay (ms), mis. 3000, 4000, 5000.
`indicatorColor`	Warna titik pagination; bisa memakai `Colors.*` atau hex.
`style`	Gaya wadah, mis. `borderRadius`.

Varian pada layar demo

Dua carousel berbagi currentHeight dan autoPlay; interval 3s vs 4s; warna indikator berbeda.
Satu carousel efek gambar (grayscale/blur/seed) dengan tinggi tetap 180 dan interval 5s.
Satu carousel auto={false} untuk navigasi geser saja.

Impor di referensi

useState dari react; primitif UI dari react-native. Dari NexaJS: Carousel, Colors, FontFamily. Pada berkas referensi, Buttons dan assetsImage ikut diimpor tetapi tidak dipakai — boleh dihapus agar bersih.

Praktik yang disarankan

Pastikan URL gambar dapat diakses perangkat (HTTPS, CORS/kebijakan jaringan aplikasi).
Untuk produksi, prefer CDN atau aset lokal; layanan placeholder hanya untuk pengembangan.
Kurangi interval di layar informasi padat agar pengguna sempat membaca overlay.
Uji dengan autoplay mati untuk aksesibilitas — beberapa pengguna membutuhkan kontrol manual penuh.

Nxdom Framework