Swiper
Swiper - tạo Slider cho Zalo Mini App. Bao gồm:
Properties
<Swiper/> properties
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Thêm css class cho element | |
| style | React.CSSProperties | Thêm inline style cho element | |
| id | string | Element id | |
| pagination | number | Ẩn/Hiện phần phân trang | |
| scrollbar | boolean | Ẩn/Hiện scrollbar | |
| navigation | boolean | Ẩn/Hiện nút điều hướng | |
| autoplay | boolean | Bật/Tắt tự động chuyển trang | |
| allowSlideNext | boolean | Bật/Tắt cho phép chuyển trang kế tiếp | |
| allowSlidePrev | boolean | Bật/Tắt cho phép chuyển trang trước | |
| allowTouchMove | boolean | Bật/Tắt cho phép chuyển trang bằng nhấn và vuốt màn hình | |
| centeredSlides | boolean | false | Bật/Tắt căn giữa slide đang kích hoạt |
| direction | 'horizontal' | 'vertical' | 'horizontal' | Slider theo chiều ngang hoặc dọc |
| effect | 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'creative' | 'cards' | 'slide' | Hiệu ứng chuyển slide |
| enabled | boolean | true | |
| loop | boolean | false | Khởi tạo với chế độ lặp |
| loopedSlides | number | Trường hợp loop={true} và slidesPerView='auto' đặt số lượng slide sẽ lặp | |
| slidesPerView | number | 'auto' | Số slide hiển thị trên một view | |
| spaceBetween | number | 0 | Khoảng cách giữa các slide (px) |
| speed | number | 300 | Thời gian chuyển slide (ms) |
| onSlideChange | function(swiper) | Event kích hoạt khi slide thay đổi |
<SwiperSlide/> properties
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Thêm css class cho element | |
| style | React.CSSProperties | Thêm inline style cho element | |
| id | string | element id |
Swiper Instance Properties & Methods
Truy cập swiper instance thông qua css selector id:
<Swiper id='swiper-id' ref={swiperRef}></Swiper>
const swiper = zmp.swiper.get('swiper-id');
| Properties | Description |
|---|---|
| activeIndex | Cho biết index của slide đang kích hoạt |
| allowSlideNext | Cho biết swiper có cho phép chuyển slide kế tiếp hay không |
| allowSlidePrev | Cho biết swiper có cho phép chuyển slide trước đó hay không |
| allowTouchMove | Cho biết swiper có cho phép chuyển slide bằng nhấn, vuốt màn hình hay không |
| previousIndex | Cho biết index của slide trước đó |
| animating | Cho biết trạng thái swiper đang chuyển slide hay không không |
| destroy(deleteInstance, cleanStyles) | Huỷ swiper instance |
| disable() | Vô hiệu hoá swiper |
| enable() | Kích hoạt swiper |
| slideNext(speed, runCallbacks) | Chuyển slide kế tiếp |
| slidePrev(speed, runCallbacks) | Chuyển về slide trước đó |
| slideTo(index, speed, runCallbacks) | Chuyển đến slide cụ thể theo index |
| update() | Cập nhật lại swiper |
Ví dụ
Code demo fallback when rendering server side!