Ngorei Doc
Ngorei Doc
Dokumentasi komponen Carousel yang dapat digunakan dalam NexaUI framework. Carousel memungkinkan Anda menampilkan konten dalam bentuk slideshow.
Carousel dasar dengan navigasi slide dan indikator.
<div class="nx-carousel">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/800/400?random=1" alt="Random Image 1">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/800/400?random=2" alt="Random Image 2">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/800/400?random=3" alt="Random Image 3">
</div>
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
<div class="nx-carousel-progress">
<div class="progress-bar"></div>
</div>
</div>
<Carousel
type="besic"
progress="true"
controls="true"
images="
https://picsum.photos/seed/auto1/800/400,
https://picsum.photos/seed/auto2/800/400,
https://picsum.photos/seed/auto3/800/400"
interval="3000"/>
Menambahkan teks caption pada slide carousel.
Deskripsi untuk gambar pertama.
Deskripsi untuk gambar kedua.
<div class="nx-carousel">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/id/237/800/400" alt="Image 237">
<div class="nx-carousel-caption">
<h5>Gambar Pertama</h5>
<p>Deskripsi untuk gambar pertama.</p>
</div>
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/id/238/800/400" alt="Image 238">
<div class="nx-carousel-caption">
<h5>Gambar Kedua</h5>
<p>Deskripsi untuk gambar kedua.</p>
</div>
</div>
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
</div>
<<div>
</div>
Menambahkan indikator posisi slide pada carousel.
<div class="nx-carousel">
<div class="nx-carousel-indicators">
<button type="button" data-slide-to="0" class="active"></button>
<button type="button" data-slide-to="1"></button>
<button type="button" data-slide-to="2"></button>
</div>
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/seed/first/800/400" alt="Seeded Image 1">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/second/800/400" alt="Seeded Image 2">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/third/800/400" alt="Seeded Image 3">
</div>
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
</div>
<<div>
</div>
Carousel yang responsif dengan berbagai ukuran layar.
Tampilan untuk layar besar
Tampilan untuk tablet
Tampilan untuk mobile
<div class="nx-carousel nx-carousel-responsive">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/seed/resp1/800/400" alt="Responsive 1">
<div class="nx-carousel-caption">
<h5>Desktop View</h5>
<p>Tampilan untuk layar besar</p>
</div>
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/resp2/800/400" alt="Responsive 2">
<div class="nx-carousel-caption">
<h5>Tablet View</h5>
<p>Tampilan untuk tablet</p>
</div>
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/resp3/800/400" alt="Responsive 3">
<div class="nx-carousel-caption">
<h5>Mobile View</h5>
<p>Tampilan untuk mobile</p>
</div>
</div>
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
</div>
<<div>
</div>
/* Responsive breakpoints */
@media (min-width: 1200px) {
.nx-carousel-inner {
height: 500px;
}
}
@media (max-width: 1199px) {
.nx-carousel-inner {
height: 400px;
}
}
@media (max-width: 991px) {
.nx-carousel-inner {
height: 350px;
}
}
@media (max-width: 767px) {
.nx-carousel-inner {
height: 300px;
}
.nx-carousel-caption {
padding: 10px;
}
.nx-carousel-caption h5 {
font-size: 1rem;
}
.nx-carousel-caption p {
font-size: 0.875rem;
}
}
@media (max-width: 575px) {
.nx-carousel-inner {
height: 250px;
}
.nx-carousel-prev,
.nx-carousel-next {
width: 30px;
height: 30px;
font-size: 14px;
}
.nx-carousel-indicators {
bottom: 10px;
}
.nx-carousel-indicators button {
width: 8px;
height: 8px;
}
}
Optimasi carousel untuk perangkat mobile dengan fitur touch dan gesture.
<div class="nx-carousel nx-carousel-mobile">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/seed/mobile1/800/400" alt="Mobile 1">
<div class="nx-carousel-overlay">
<span class="swipe-hint">← Geser →</span>
</div>
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/mobile2/800/400" alt="Mobile 2">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/mobile3/800/400" alt="Mobile 3">
</div>
</div>
<div class="nx-carousel-indicators mobile">
<button type="button" data-slide-to="0" class="active"></button>
<button type="button" data-slide-to="1"></button>
<button type="button" data-slide-to="2"></button>
</div>
</div>
<<div>
</div>
Carousel dengan fitur autoplay yang dapat dikustomisasi.
<div class="nx-carousel nx-carousel-autoplay" data-interval="3000">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="https://picsum.photos/seed/auto1/800/400" alt="Auto 1">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/auto2/800/400" alt="Auto 2">
</div>
<div class="nx-carousel-item">
<img src="https://picsum.photos/seed/auto3/800/400" alt="Auto 3">
</div>
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
<button class="nx-carousel-play-toggle" aria-label="Toggle autoplay">
<span class="pause-icon">⏸</span>
<span class="play-icon" style="display:none">▶</span>
</button>
<div class="nx-carousel-progress">
<div class="progress-bar"></div>
</div>
</div>
<Carousel
type="autoplay"
progress="true"
controls="true"
images="
https://picsum.photos/seed/auto1/800/400,
https://picsum.photos/seed/auto2/800/400,
https://picsum.photos/seed/auto3/800/400"
interval="3000"/>
Carousel yang akan berhenti saat kursor berada di atasnya.
Arahkan kursor ke carousel untuk menghentikan autoplay
Carousel akan melanjutkan autoplay saat kursor keluar
Perhatikan progress bar yang berhenti saat hover
<div class="nx-carousel nx-carousel-pause-hover nx-carousel-autoplay" data-interval="3000">
<div class="nx-carousel-inner">
<div class="nx-carousel-item active">
<img src="path/to/image1.jpg" alt="Hover 1">
<div class="nx-carousel-caption">
<h5>Hover untuk Pause</h5>
<p>Arahkan kursor ke carousel untuk menghentikan autoplay</p>
</div>
</div>
<!-- Tambahkan slide lainnya di sini -->
</div>
<button class="nx-carousel-prev">❮</button>
<button class="nx-carousel-next">❯</button>
<div class="nx-carousel-progress">
<div class="progress-bar"></div>
</div>
</div>
<<div>
</div>
Dokumentasi penggunaan JavaScript untuk mengontrol dan mengkustomisasi carousel.
Carousel akan otomatis terinisialisasi untuk semua elemen dengan class nx-carousel.
// Inisialisasi otomatis
document.addEventListener('DOMContentLoaded', () => {
const carousels = document.querySelectorAll('.nx-carousel');
carousels.forEach(carousel => {
new NexaCarousel(carousel);
});
});
// Atau inisialisasi manual
const myCarousel = new NexaCarousel(document.querySelector('#myCarousel'));
Anda dapat mengkustomisasi carousel menggunakan atribut data atau class.
<!-- Konfigurasi melalui atribut data -->
<div class="nx-carousel"
data-interval="7000" <!-- Durasi tiap slide (ms) -->
data-pause="hover" <!-- Pause saat hover -->
data-keyboard="true"> <!-- Enable keyboard control -->
<!-- konten carousel -->
</div>
<!-- Konfigurasi melalui class -->
<div class="nx-carousel nx-carousel-pause-hover nx-carousel-mobile">
<!-- konten carousel -->
</div>
Methods yang tersedia untuk mengontrol carousel:
// Inisialisasi carousel
const carousel = new NexaCarousel(element);
// Navigasi
carousel.next(); // Pindah ke slide berikutnya
carousel.prev(); // Pindah ke slide sebelumnya
carousel.goToSlide(index); // Pindah ke slide tertentu
// Kontrol Autoplay
carousel.play(); // Mulai autoplay
carousel.pause(); // Pause autoplay
carousel.togglePlay(); // Toggle play/pause
// Progress Bar
carousel.updateProgressBar(); // Update progress bar
carousel.resetProgressBar(); // Reset progress bar
carousel.pauseProgressBar(); // Pause progress bar
Carousel memiliki beberapa event yang dapat digunakan:
// Event listeners
carousel.addEventListener('slide.change', (e) => {
console.log('Slide changed to:', e.detail.index);
});
carousel.addEventListener('autoplay.play', () => {
console.log('Autoplay started');
});
carousel.addEventListener('autoplay.pause', () => {
console.log('Autoplay paused');
});
// Touch events (untuk mobile)
carousel.addEventListener('swipe.left', () => {
console.log('Swiped left');
});
carousel.addEventListener('swipe.right', () => {
console.log('Swiped right');
});
Tambahkan class nx-carousel-mobile untuk mengaktifkan dukungan touch gesture.
<!-- Carousel dengan touch support -->
<div class="nx-carousel nx-carousel-mobile">
<div class="nx-carousel-inner">
<!-- slides -->
</div>
<!-- controls -->
</div>
Kontrol keyboard yang tersedia:
← (Left Arrow) : Slide sebelumnya
→ (Right Arrow) : Slide berikutnya
Space : Toggle play/pause
Mengkustomisasi tampilan dan behavior progress bar:
// Mengubah durasi progress bar
carousel.autoplayDuration = 5000; // 5 detik per slide
// Mengubah style progress bar
const progressBar = carousel.querySelector('.progress-bar');
progressBar.style.backgroundColor = '#ff0000'; // Warna merah
progressBar.style.height = '5px'; // Tinggi 5px