Sửa lỗi Swiper CLS Cumulative Layout Shift
Qua công việc tối ưu core web mình hay gặp các slider load gây nên tình trạng dịch chuyển bố cục tích luỹ (nói ngắn gọn là khi load trang nó không ổn định làm sai lệch lúc load và lúc hoàn thành tải trang)
Trong bài viết này mình note lại bài viết cho chính mình và giới thiệu nó đến những ai đang sử dụng Swiper slider và gặp phải lỗi CLS (Cumulative Layout Shift)
Để sửa được lỗi này bạn chỉ cần thêm css này vào website của bạn là vấn đề sẽ được giải quyết.
Nguồn: https://github.com/nolimits4web/swiper/issues/4076
Để sửa được lỗi này bạn chỉ cần thêm css này vào website của bạn là vấn đề sẽ được giải quyết.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/* Add this class to .swiper element */ .swiper-prevent-content-shift { --swiper-sidebar-w: 0px; --swiper-slidesPerView: 1; --swiper-spaceBetween: 16px; --swiper-available-width: 100vw - ( var(--page) * 2 ) - var(--swiper-sidebar-w); --swiper-SwiperSlide-width: calc( ( var(--swiper-available-width) - ( ( var(--swiper-slidesPerView) - 1 ) * var(--swiper-spaceBetween) ) ) / var(--swiper-slidesPerView) ); @screen lg { --swiper-sidebar-w: 14rem; } .swiper-slide { width: var(--swiper-SwiperSlide-width) !important; /* Only for horizontal swipers (only horizontal swipers need preventing content shift because vertical ones need fixed width and height) */ margin-left: var(--swiper-spaceBetween); } }/* Add this class to .swiper element */ .swiper-prevent-content-shift { --swiper-sidebar-w: 0px; --swiper-slidesPerView: 1; --swiper-spaceBetween: 16px; --swiper-available-width: 100vw - ( var(--page) * 2 ) - var(--swiper-sidebar-w); --swiper-SwiperSlide-width: calc( ( var(--swiper-available-width) - ( ( var(--swiper-slidesPerView) - 1 ) * var(--swiper-spaceBetween) ) ) / var(--swiper-slidesPerView) ); @screen lg { --swiper-sidebar-w: 14rem; } .swiper-slide { width: var(--swiper-SwiperSlide-width) !important; /* Only for horizontal swipers (only horizontal swipers need preventing content shift because vertical ones need fixed width and height) */ margin-left: var(--swiper-spaceBetween); } } |
