Responsive carousel with slidesPerView prop without CLS (Comulative Layout Shift) #325
Closed
gabrielmlinassi
started this conversation in
Show and tell
Replies: 1 comment
-
Thanks a lot for sharing this @gabrielmlinassi 🙂. Would you mind adding the tech stack in the OP so users interested in this sees that its based on Styled Components etc? Much appreciated 👍. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello everyone! I'd like to share my Embla Carousel adaptation to make it fully responsive across different viewports without causing any layout shift. Some other approaches could be for eg using a hook to detect viewport size but it will cause layout shift and UserAgent for SSR but it's not 100% reliable.
Notice that for mobile screens I don't want to show 1 slide per view but 1 and a bit of the next one which makes it a bit trickier to implement.
localhost_3000_collection_nft_07892.-.Google.Chrome.-.13.June.2022.mp4
Implementation:
https://gist.github.com/gabrielmlinassi/91624dcb1f8b137efb7de46f2dcfbac3
Beta Was this translation helpful? Give feedback.
All reactions