Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

React.js adalah pustaka JavaScript yang populer dan kuat untuk membuat antarmuka pengguna. Anda dapat menggunakannya untuk membangun aplikasi web yang dinamis, interaktif, dan responsif.

Salah satu komponen umum yang mungkin Anda gunakan dengan React.js adalah carousel. Ini mudah dilakukan, baik dengan fitur React bawaan atau menggunakan pustaka pihak ketiga.

Apa itu Carousel dan Apa Kegunaannya?

Carousel adalah komponen tayangan slide yang memungkinkan Anda menelusuri gambar atau video. Ini paling sering digunakan di situs web untuk menampilkan produk atau layanan atau untuk memamerkan konten unggulan. Ada banyak manfaat menggunakan carousel, seperti:

  • Ini adalah cara yang efektif untuk menarik perhatian ke konten penting.
  • Ini cara yang bagus untuk menampilkan banyak gambar dan video.
  • Ini membantu menjaga halaman tetap teratur dan menarik secara visual.
    • instagram viewer
  • Anda dapat menggunakannya untuk membuat pengalaman pengguna yang interaktif.

Cara Membuat Carousel di React.js

Membuat korsel di React.js relatif mudah dan ada dua pustaka populer yang bisa Anda gunakan. Anda juga dapat menggunakan fitur React bawaan untuk menambahkan carousel.

Menggunakan Fitur Bawaan

Metode pertama membuat carousel di React.js adalah memanfaatkan fitur bawaan. React menyediakan cara ampuh untuk membuat carousel dengan menggunakan komponen. Kamu bisa gunakan Bereaksi kait untuk menambah dan mengontrol carousel.

impor Bereaksi, { useState } dari 'reaksi';

const Korsel = () => {
const [indeks, setIndex] = useState(0);
const panjang = 3;

const peganganSebelumnya = () => {
const Indeks baru = indeks - 1;
setIndex (Index < 0? panjang - 1: Indeks baru);
};

const peganganBerikutnya = () => {
const Indeks baru = indeks + 1;
setIndex (Index >= panjang? 0: Indeks baru);
};

kembali (
<div namakelas="korsel">
<tombol onClick={handlePrevious}>Sebelumnya</button>
<tombol onClick={handleNext}>Berikutnya</button>
<P>{indeks}</P>
</div>
);
};

eksporbawaan Korsel;

Kode ini menggunakan hook useState untuk membuat variabel status yang disebut index. Ini akan melacak posisi saat ini di carousel.

Fungsi handlePrevious dan handleNext menangani pembaruan nilai indeks saat pengguna mengklik Sebelumnya Dan Berikutnya tombol.

Terakhir, markup menampilkan nilai indeks dalam tag paragraf. Anda dapat menampilkan gambar atau video alih-alih teks jika diinginkan. Anda juga dapat menata carousel menggunakan CSS normal atau menggunakan framework CSS seperti Tailwind CSS.

Tanpa gaya mewah apa pun, Anda akan melihat sepasang tombol dasar dan angka yang mewakili indeks saat ini:

Menggunakan Library pure-react-carousel

Metode kedua untuk membuat carousel di React.js adalah library pure-react-carousel. Pustaka ini menyediakan cara ampuh untuk membuat carousel dengan menggunakan komponen. Untuk menggunakan perpustakaan, Anda harus menginstalnya terlebih dahulu menggunakan perintah:

npm Install carousel-reaksi-murni

Setelah Anda menginstal pustaka, Anda dapat menggunakan komponen untuk membuat carousel. Berikut adalah contoh cara menggunakan komponen Carousel:

impor Reaksi dari 'reaksi';
impor { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } dari 'pure-react-carousel';
impor 'pure-react-carousel/dist/react-carousel.es.css';

const Korsel = () => {
kembali (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlide={3}
>
<Penggeser>
<Indeks slide={0}>Slide 1</Slide>
<Indeks slide={1}>Slide 2</Slide>
<Indeks slide={2}>Slide 3</Slide>
</Slider>
<Tombol Kembali>Kembali</ButtonBack>
<TombolBerikutnya>Berikutnya</ButtonNext>
</CarouselProvider>
);
};

eksporbawaan Korsel;

Dalam kode ini, Anda dapat melihat bahwa komponen CarouselProvider menentukan pengaturan umum untuk carousel seperti naturalSlideWidth, naturalSlideHeight, dan totalSlides.

Komponen Slider berisi beberapa contoh Slide. Komponen Slide mendefinisikan setiap slide individu.

Terakhir, komponen ButtonBack dan ButtonNext menangani navigasi carousel.

Ada banyak manfaat menggunakan pustaka pure-react-carousel seperti:

  • Mudah digunakan: Sementara metode bawaan memerlukan lebih banyak kode untuk membuat carousel, pustaka menyediakan cara yang lebih mudah untuk membuat carousel di React.js.
  • Responsif: Perpustakaan menyediakan kemampuan untuk membuat komidi putar responsif. Dengan metode bawaan, Anda harus membuat carousel terpisah untuk ukuran layar yang berbeda.
  • Kustomisasi: Pustaka menyediakan banyak fitur yang dapat Anda gunakan untuk menyesuaikan korsel seperti putar otomatis, panah navigasi, paginasi, dan lainnya.

Menggunakan Perpustakaan react-responsive-carousel

Metode terakhir untuk membuat carousel di React.js adalah library react-responsive-carousel. Dengan library ini, Anda dapat membuat carousel dengan menggunakan komponen. Untuk menggunakan perpustakaan, Anda harus menginstalnya terlebih dahulu menggunakan perintah:

npm Install reaksi-responsif-carousel

Setelah Anda menginstal pustaka, Anda dapat menggunakan komponen untuk membuat carousel. Berikut adalah contoh cara menggunakan komponen Carousel:

impor Reaksi dari 'reaksi';
impor { Korsel } dari 'react-responsive-carousel';
impor 'react-responsive-carousel/lib/styles/carousel.min.css';

const Halaman Korsel = () => {
kembali (
<Korsel>
<div>
<img src="https://placehold.co/100x100" />
<p namakelas="legenda">Legenda 1</P>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p namakelas="legenda">Legenda 2</P>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p namakelas="legenda">Legenda 3</P>
</div>
</Carousel>
);
};

eksporbawaan Halaman Korsel;

Dalam kode ini, Anda dapat melihat bahwa komponen Carousel mendefinisikan carousel. Di dalam komponen Carousel, sebuah div berisi setiap slide individual. Setiap slide dapat berisi gambar serta legenda untuk gambar tersebut. Pustaka juga menyediakan berbagai opsi dan pengaturan yang bisa Anda gunakan untuk mengkustomisasi carousel.

Ada banyak manfaat menggunakan perpustakaan react-responsive-carousel seperti:

  • Salah satu perpustakaan paling populer: Pustaka adalah salah satu pustaka paling populer untuk membuat komidi putar di React.js. Jadi, jika Anda mengalami kebuntuan, Anda dapat dengan mudah mencari bantuan dari komunitas.
  • Mudah digunakan: Dengan hanya beberapa baris kode, Anda dapat dengan mudah membuat carousel.
  • Responsif: Perpustakaan menyediakan kemampuan untuk membuat komidi putar responsif.
  • Kustomisasi: Pustaka juga menyediakan banyak fitur yang dapat Anda gunakan untuk menyesuaikan dan memberi gaya carousel.

Tingkatkan Pengalaman Pengguna Dengan Carousel

Dengan korsel, Anda dapat memberikan lebih banyak informasi kepada pengguna dan membantu mereka berinteraksi dengan situs web Anda dengan lebih mudah. Korsel juga membantu menjaga halaman tetap teratur dan menarik secara visual. Akibatnya, ini adalah cara yang bagus untuk meningkatkan pengalaman pengguna.

Anda juga dapat melacak interaksi pengguna dengan komidi putar dan menggunakan data untuk mengoptimalkan pengalaman pengguna. Ini akan membantu Anda menciptakan pengalaman pengguna yang lebih baik di situs web Anda. Setelah itu, Anda dapat menggunakan aplikasi React Anda secara gratis di platform seperti halaman Github yang mudah dan hemat biaya.