Cara Membuat Antarmuka Swipeable di Aplikasi React Anda Dengan Swiper
Table of content:
Saat perangkat seluler menjadi lebih populer, antarmuka yang dapat digesek telah menjadi cara standar untuk berinteraksi dengan aplikasi. Antarmuka yang dapat digeser sangat penting untuk memberikan pengalaman pengguna terbaik kepada pengguna seluler.
Swiper adalah pustaka serbaguna yang memungkinkan Anda membuat antarmuka yang dapat digesek dalam aplikasi React Anda. Temukan bagaimana Anda dapat membuat antarmuka yang dapat digesek di aplikasi React Anda menggunakan Swiper.
Baca Juga:
Menginstal Swiper
Swiper adalah salah satu dari banyak pustaka yang dapat Anda gunakan untuk menyesuaikan aplikasi React Anda. Untuk memulai Swiper, Anda perlu menginstalnya di aplikasi React Anda. Anda dapat melakukan ini dengan perintah terminal berikut yang harus Anda jalankan di direktori root proyek Anda:
npm install swiper
Setelah Anda menginstal Swiper, Anda dapat menggunakannya di aplikasi Anda.
Membuat Antarmuka yang Dapat Digesek
Setelah menginstal Swiper di aplikasi React Anda, Anda dapat membuat antarmuka yang dapat digesek. Mulailah dengan mengimpor file Geser Dan SwiperSlide komponen dari perpustakaan Swiper.
Komponen Swiper adalah komponen inti dari perpustakaan Swiper. Ini mendefinisikan struktur, perilaku, dan fungsionalitas elemen yang dapat digesek. Komponen SwiperSlide adalah komponen turunan dari komponen Swiper. Ini mendefinisikan slide individual yang ada di dalam komponen Swiper.
Berikut adalah contoh antarmuka yang dapat digesek menggunakan komponen Swiper dan SwiperSlide:
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';function App() {
return (
<div>
<Swiper>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
Selain itu Geser Dan SwiperSlide komponen, blok kode ini mengimpor style sheet default untuk Swiper menggunakan penggesek/css modul.
Contoh kemudian membungkus komponen Swiper di sekitar empat komponen anak SwiperSlide. Setiap SwiperSlide berisi a div elemen dengan nama kelas atribut. Anda dapat menggunakan className untuk menata elemen div:
.element {
inline-size: 100px;
border-radius: 12px;
padding: 1rem;
color: #333333;
background-color: #e2e2e2;
font-family: cursive;
}
Menyesuaikan Antarmuka yang Dapat Digesek Anda
Setelah berhasil membuat antarmuka yang dapat digesek, Anda dapat menyempurnakan tampilan dan fungsinya agar sesuai dengan kebutuhan Anda.
Dengan Swiper, Anda dapat menyesuaikan perilaku dan tampilan antarmuka menggunakan berbagai opsi. Anda meneruskan opsi ini ke Geser komponen sebagai alat peraga di Bereaksi:
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
loop={ true }
>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
Dalam contoh ini, komponen Swiper menggunakan tiga props: spaceBetween, slidePerViewDan lingkaran. Itu spaceBetween prop menyetel ruang di antara setiap slide, dalam hal ini 30 piksel.
Menggunakan slidePerView prop, Anda dapat mengatur jumlah slide yang terlihat sekaligus. Dalam hal ini, slidePerView prop diatur ke 2 menyebabkan Geser komponen untuk menampilkan dua slide secara bersamaan.
Terakhir, the lingkaran prop menentukan apakah slide harus diulang tanpa batas atau tidak. Dalam contoh ini, slide akan berulang tanpa batas karena lingkaran nilai penyangga adalah BENAR.
Mengonfigurasi Antarmuka yang Dapat Digesek dengan Modul
Anda selanjutnya dapat mengonfigurasi perilaku antarmuka yang dapat digesek dengan modul JavaScript yang disediakan oleh pustaka Swiper. Beberapa modul yang disediakannya adalah Navigasi, Putar otomatis, PaginasiDan Scroll bar.
Untuk menggunakan salah satu modul ini di aplikasi Anda, Anda harus mengimpornya dari pustaka Swiper. Anda juga harus mengimpor gaya CSS yang sesuai untuk modul dan meneruskan namanya ke Geser komponen menggunakan modul menopang.
Misalnya, ini adalah bagaimana Anda dapat menggunakan Navigasi modul untuk mengonfigurasi antarmuka yang dapat digesek:
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Navigation]}
loop={true}
navigation={true}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
Blok kode ini mengimpor Navigasi modul dan gaya CSS-nya, lalu tentukan modul di modul penyangga dari Geser komponen. Itu modul prop mengaktifkan dan mengonfigurasi modul yang disediakan oleh pustaka Swiper.
Modul Navigasi menyediakan fungsionalitas navigasi ke komponen Swiper. Itu menambahkan tombol panah sebelumnya dan berikutnya yang dapat Anda klik atau ketuk untuk berpindah ke slide sebelumnya atau berikutnya.
Itu navigasi nilai prop benar yang akan menyebabkan tombol sebelumnya dan selanjutnya ditampilkan di layar.
Mengonfigurasi Antarmuka yang Dapat Digeser Dengan Putar Otomatis
Itu Putar otomatis modul memungkinkan penggeser untuk bertransisi antar slide secara otomatis tanpa interaksi pengguna.
Berikut adalah contoh cara mengonfigurasi antarmuka yang dapat digesek menggunakan Putar otomatis modul:
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
loop={true}
autoplay={{ delay: 3000 }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
Menggunakan putar otomatis prop, Anda dapat menentukan menunda; dalam hal ini, disetel ke 3000 milidetik.
Modul Swiper penting lainnya adalah Paginasi. Itu Paginasi modul memungkinkan Anda untuk menambahkan poin paginasi atau indikator bilah kemajuan ke penggeser, memberi pengguna representasi visual dari jumlah slide dan posisi mereka saat ini di dalam penggeser.
Untuk menggunakan Paginasi modul, Anda perlu mengimpornya dan memasukkannya ke dalam modul penyangga dari Geser komponen:
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Pagination]}
loop={true}
pagination={{ clickable: true }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
Blok kode ini menyediakan fungsi pagination dengan Paginasi modul. Ini juga memungkinkan pengguna untuk mengklik penomoran halaman peluru dengan mengatur dapat diklik properti dari penomoran halaman prop menjadi benar.
Selain perpustakaan Swiper penomoran halaman module, react-paginate adalah pilihan bagus lainnya untuk membuat pagination di aplikasi React Anda.
Membangun Aplikasi yang Dapat Diakses Dengan React
Antarmuka yang dapat digesek meningkatkan pengalaman pengguna aplikasi Anda untuk pengguna layar sentuh. Swiper menawarkan banyak fleksibilitas dan Anda dapat dengan mudah menyesuaikannya sesuai dengan kebutuhan aplikasi Anda.
Berbagai pustaka UI dapat membantu membuat aplikasi React Anda lebih mudah diakses. Pustaka ini menyediakan fitur dan fungsionalitas yang menyempurnakan pengalaman pengguna aplikasi Anda.
Artikel Terkait
