Cách tạo interface có thể vuốt trong app React bằng Swiper

Swiper là một thư viện linh hoạt, cho phép bạn tạo giao diện có thể vuốt trong các ứng dụng React. Ở bài viết này, hãy cùng Quantrimang.com khám phá cách bạn có thể tạo giao diện có thể vuốt trong ứng dụng React bằng Swiper như thế nào nhé!

Cài đặt Swiper

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

npm install swiper

Sau khi cài đặt Swiper, bạn có thể dùng nó trong ứng dụng.

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

Sau khi cài đặt Swiper trong app React, bạn có thể tạo giao diện có thể vuốt. Bắt đầu bằng cách nhập các thành phần Swiper và SwiperSlide từ thư viện Swiper.

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

Ví dụ về giao diện có thể vuốt bằng 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 Swiper và SwiperSlide, khối code này nhập bảng mặc định cho Swiper bằng mô đun swiper/css.

Ví dụ này sau đó đóng gói thành phần Swiper quanh 4 thành phần con SwiperSlide. Mỗi Swiper Slide chứa một thành phần div cùng thuộc tính className. Bạn có thể dùng className để tạo kiểu cho thành phần div:

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

Tùy biến giao diện có thể vuốt

Sau khi tạo thành công giao diện có thể vuốt, bạn dễ dàng nâng cao thiết kế và chức năng của nó theo nhu cầu.

Với Swiper, bạn có thể tùy biến hành vi, hình ảnh của interface bằng các lựa chọn khác nhau. Bạn chuyển những lựa chọn đó sang thành phần Swiper dưới dạng props 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

Ở ví dụ này, thành phần Swiper có 3 props (thuộc tính): spaceBetween, slidesPerView, và loop. spaceBetween đặt khoảng cách giữa từng slide, ở đây là 30 pixel.

Dùng slidesPerView, bạn có thể đặt số slide hiển thị cùng lúc. Trong trường hợp này, sidesPerView được đặt sang 2 khiến thành phần Swiper hiện 2 slide cùng lúc.

Cuối cùng, loop xác định các slide sẽ lặp vô tận hoặc không. Trong ví dụ này, slide sẽ lặp vô tận bởi thuộc tính loop là true.

Trên đây là cách tạo giao diện vuốt cho ứng dụng React bằng Swiper. Hi vọng bài viết hữu ích với các bạn.