Swiper
Cú pháp
<zmp-swiper> <zmp-swiper-slide>
Component hỗ trợ tạo slider cho Zalo Mini App.
Swiper Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | |
| allow-slide-next | boolean | Bật/Tắt cho phép chuyển trang kế tiếp | |
| allow-slide-prev | boolean | Bật/Tắt cho phép chuyển trang trước | |
| allow-touch-move | boolean | Bật/Tắt cho phép chuyển trang bằng nhấn và vuốt màn hình | |
| centered-slides | 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 |
| looped-slides | number | Trường hợp loop={true} và slidesPerView='auto' đặt số lượng slide sẽ lặp | |
| slides-per-view | number | 'auto' | Số slide hiển thị trên một view | |
| space-between | number | 0 | Khoảng cách giữa các slide (px) |
| speed | number | 300 | Thời gian chuyển slide (ms) |
Swiper Events
| Event | Description |
|---|---|
| @slide-change | Event kích hoạt khi đổi slide |
Swiper Instance Properties & Methods
Ta có thể truy cập swiper instance thông qua zmp.swiper.get và truyền vào selector của swiper. Ví dụ:
<zmp-swiper id="swiper-id"></zmp-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!