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