Mẹo dùng Flickity: cân đối chiều cao đối tương (equal height)

Rate this post

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

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...