Cách tạo giao diện có thể vuốt trong ứng dụng React của bạn với Swiper

Khi các thiết bị di động trở nên phổ biến hơn, các giao diện có thể vuốt được đã trở thành một cách tiêu chuẩn để tương tác với các ứng dụng. Giao diện có thể vuốt là điều cần thiết để cung cấp trải nghiệm người dùng tốt nhất cho người dùng di động.

Swiper là một thư viện đa năng cho phép bạn tạo các giao diện có thể vuốt trong các ứng dụng React của mình. Khám phá cách bạn có thể tạo giao diện có thể vuốt trong ứng dụng React của mình bằng Swiper.

Cài đặt Swiper

Swiper là một trong nhiều thư viện bạn có thể sử dụng để tùy chỉnh ứng dụng React của mình. Để bắt đầu với Swiper, bạn cần cài đặt nó trong ứng dụng React của mình. Bạn có thể thực hiện việc này bằng lệnh đầu cuối sau mà bạn sẽ chạy trong thư mục gốc của dự án:

 npm install swiper
 

Khi bạn đã cài đặt Swiper, bạn có thể sử dụng nó trong ứng dụng của mình.

Tạo giao diện có thể vuốt

Sau khi cài đặt Swiper trong ứng dụng React của bạn, bạn có thể tạo các giao diện có thể vuốt được. Bắt đầu bằng cách nhập khẩu cái gạt nước Và thanh trượt các thành phần từ thư viện Swiper.

Thành phần Swiper là thành phần cốt lõi của thư viện Swiper. Nó xác định cấu trúc, hành vi và chức năng của các phần tử có thể vuốt. Thành phần SwiperSlide là thành phần con của thành phần Swiper. Nó định nghĩa các slide riêng lẻ nằm trong thành phần Swiper.

Dưới đây là ví dụ về giao diện có thể vuốt bằng cách sử dụng các thành phần Swiper và 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
 

Ngoài các cái gạt nước Và thanh trượt các thành phần, khối mã này sẽ nhập biểu định kiểu mặc định cho Swiper bằng cách sử dụng người quét/css mô-đun.

Sau đó, ví dụ bao bọc một thành phần Swiper xung quanh bốn thành phần con SwiperSlide. Mỗi SwiperSlide chứa một div phần tử với tên lớp thuộc tính. Bạn có thể sử dụng className để tạo kiểu cho các phần tử div:

 .element {
  inline-size: 100px;
  border-radius: 12px;
  padding: 1rem;
  color: #333333;
  background-color: #e2e2e2;
  font-family: cursive;
}
 

Tùy chỉnh giao diện có thể vuốt của bạn

Sau khi tạo thành công giao diện có thể vuốt, bạn có thể nâng cao hình thức và chức năng của giao diện đó cho phù hợp với yêu cầu của mình.

Với Swiper, bạn có thể tùy chỉnh hành vi và hình thức của giao diện bằng nhiều tùy chọn khác nhau. Bạn chuyển các tùy chọn này cho cái gạt nước thành phần làm đạo cụ trong React:

 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
 

Trong ví dụ này, thành phần Swiper có ba đạo cụ: không gianGiữa, slidePerViewVà vòng. Các không gianGiữa prop đặt khoảng cách giữa mỗi trang chiếu, trong trường hợp này là 30 pixel.

Sử dụng slidePerView prop, bạn có thể đặt số lượng trang chiếu hiển thị cùng một lúc. Trong trường hợp này, các slidePerView prop được đặt thành 2 gây ra cái gạt nước thành phần để hiển thị hai slide cùng một lúc.

Cuối cùng, vòng prop chỉ định liệu các trang chiếu có lặp lại vô tận hay không. Trong ví dụ này, các trang chiếu sẽ lặp vô hạn vì vòng giá trị prop là ĐÚNG VẬY.

Định cấu hình giao diện có thể vuốt của bạn với các mô-đun

Bạn có thể định cấu hình thêm hành vi của giao diện có thể vuốt bằng các mô-đun JavaScript do thư viện Swiper cung cấp. Một số mô-đun nó cung cấp là dẫn đường, Tự chạy, phân trangVà Thanh cuộn.

Để sử dụng bất kỳ mô-đun nào trong số này trong ứng dụng của mình, bạn phải nhập chúng từ thư viện Swiper. Bạn cũng nên nhập các kiểu CSS tương ứng cho các mô-đun và chuyển tên của chúng vào cái gạt nước thành phần sử dụng mô-đun chống đỡ.

Ví dụ, đây là cách bạn có thể sử dụng dẫn đường mô-đun để định cấu hình giao diện có thể vuốt của bạn:

 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;
 

Khối mã này nhập khẩu dẫn đường mô-đun và kiểu CSS của nó, sau đó chỉ định mô-đun trong mô-đun chỗ dựa của cái gạt nước thành phần. Các mô-đun prop kích hoạt và định cấu hình các mô-đun do thư viện Swiper cung cấp.

Mô-đun Điều hướng cung cấp chức năng điều hướng cho thành phần Swiper. Nó thêm các nút mũi tên trước đó và tiếp theo mà bạn có thể nhấp hoặc nhấn để di chuyển đến trang chiếu trước đó hoặc trang chiếu tiếp theo.

Các dẫn đường giá trị prop là true, điều này sẽ khiến các nút trước đó và tiếp theo hiển thị trên màn hình.

Định cấu hình giao diện có thể vuốt với AutoPlay

Các Tự chạy mô-đun cho phép thanh trượt tự động chuyển đổi giữa các trang chiếu mà không cần sự tương tác của người dùng.

Đây là một ví dụ về cách định cấu hình giao diện có thể vuốt của bạn bằng cách sử dụng Tự chạy mô-đun:

 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;
 

Sử dụng tự chạy prop, bạn có thể chỉ định trì hoãn; trong trường hợp này, nó được đặt thành 3000 mili giây.

Một mô-đun Swiper quan trọng khác là phân trang. Các phân trang mô-đun cho phép bạn thêm dấu đầu dòng phân trang hoặc chỉ báo thanh tiến trình vào thanh trượt, cung cấp cho người dùng biểu diễn trực quan về số lượng trang chiếu và vị trí hiện tại của chúng trong thanh trượt.

Để sử dụng phân trang mô-đun, bạn cần nhập nó và đưa nó vào mô-đun chỗ dựa của cái gạt nước thành phần:

 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;
 

Khối mã này cung cấp chức năng phân trang với phân trang mô-đun. Nó cũng cho phép người dùng nhấp vào phân trang đạn bằng cách thiết lập có thể nhấp tài sản của phân trang chống đỡ thành sự thật.

Ngoài thư viện Swiper phân trang module, react-paginate là một tùy chọn tuyệt vời khác để tạo phân trang trong ứng dụng React của bạn.

Xây dựng các ứng dụng có thể truy cập với React

Giao diện có thể vuốt cải thiện trải nghiệm người dùng ứng dụng của bạn cho người dùng màn hình cảm ứng. Swiper cung cấp nhiều tính linh hoạt và bạn có thể dễ dàng tùy chỉnh nó theo nhu cầu của ứng dụng của mình.

Các thư viện giao diện người dùng khác nhau có thể giúp ứng dụng React của bạn dễ tiếp cận hơn. Các thư viện này cung cấp các tính năng và chức năng giúp nâng cao trải nghiệm người dùng cho ứng dụng của bạn.