Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Trong Flickity, các đối tượng để làm slider thông thường sẽ có chiều cao bằng nhau (do developer nhập nội dung). Nhưng bạn sẽ xử lý nào nếu các element có chiều cao khác nhau? Hãy cùng Code Tốt giải bài toán này nhé.

Flickity là gì?

Flickity là thư viện Javascript cho phép bạn tạo slideshow một cách hết sức đơn giản, hỗ trợ responsive và tuỳ biến rất mạnh mẽ.

Cân bằng chiều cao các element trong Flickity như thế nào?

Vấn đề là gì?

Flickity thông thường sẽ chủ động set height cho 1 div wrapper bọc ngoài các element và chuyển các elemenet sang trạng thái “absolute”. Chính vì vậy, việc bạn set height: 100% trực tiếp ngay trong CSS sẽ không hoạt động do phần height này không khớp với height của Flickity set ngoài wrapper.

Hướng xử lý như thế nào?

Cách xử lý là sau khi Flickity load xong, ta sẽ gán 1 class vào trong markup bằng Javascript. Trong CSS, chỉ khi nào có class này thì các element mới được set height: 100%

https://codepen.io/desandro/pen/ZXEGVq

0 0 vote
Article Rating
Author

Leader tại CODE TỐT, Business Development Manager tại kweb.vn, và là Locale Manager (Quản lý ngôn ngữ) tại vi.wordpress.org/team (và có lẽ nhiều bản dịch chính là do <<>> dịch và phát hành cho mọi người dùng đấy!)

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x