How to build a carousel in Lit

In this video, we build a simple-carousel using Lit, letting us explore passing child DOM (Document Object Model) into your web component and some simple web component composition. We also use the Web animation API, play with SVGs, styles, and events to make the carousel look beautiful. Finally, we use the carousel in a create-react-app just by adding the simple-carousel HTML tag we invented.

Github repository with completed simple-carousel → https://goo.gle/3kmGEor

Motion Carousel Playground example → https://goo.gle/37UJxK9
Lit documentation site → https://goo.gle/Lit-devsite
Web Animations API docs → https://goo.gle/3LqYRx7

Chapters
0:00 - Introduction
0:51 - Finished simple-carousel demo
Final code in a repository → https://goo.gle/3y0BVk8
01:20 - Lit starter kit setup
Get Node.js →https://goo.gle/3Lqieq4
02:20 - Defining the simple-carousel
Follow along using the Lit playground → https://goo.gle/3ruWNfx
03:08 - Passing in child elements
Checkpoint TS → https://goo.gle/3MDnCpM
Checkpoint JS → https://goo.gle/38x4cUM
Rendering children with slots documentation → https://goo.gle/38rXwHD
HTMLSlotElement MDN documentation → https://goo.gle/37OBSNG
Shadow DOM
:slotted()
06:10 - Carousel slide-button!
Checkpoint TS → https://goo.gle/36V29cO
Checkpoint JS → https://goo.gle/37RjNia
07:12 - Using slide-button in simple-carousel
Checkpoint TS → https://goo.gle/3MFA8Fd
Checkpoint JS → https://goo.gle/3voAsCw
Events documentation → https://goo.gle/39pK3k8
08:05 - SVG and styles
Checkpoint TS → https://goo.gle/3vroMPH
Checkpoint JS → https://goo.gle/3vlQeya
10:03 - Animations
Checkpoint TS → https://goo.gle/36UR37A
Checkpoint JS → https://goo.gle/3OHk8EB
Element.animate documentation → https://goo.gle/3KjYQtv
12:18 - Use simple-carousel in React!
Finished code Github repository → https://goo.gle/3kmGEor
Create React App → https://goo.gle/3vSsVLk
@lit-labs/react → https://goo.gle/3ksAOSh
Custom Elements in React RFC → https://goo.gle/36WGGjH
14:02 - Wrap up
@lit-labs/motion → https://goo.gle/3kmNUAA
Motion Carousel Playground example → https://goo.gle/37UJxK9
Lit Github Discussions → https://goo.gle/3uSoRvr

Have any lingering questions? Tweet at us with the hashtag AskLitDev or join the Lit & Friends Discord!

Join the community → https://goo.gle/Lit-Community
Twitter → https://goo.gle/Lit-Twitter
Discord → https://goo.gle/Lit-Discord

Watch more Build it with Lit → https://goo.gle/BuilditwithLit
Subscribe to never miss a video on Lit → https://goo.gle/Lit

#Lit #WebComponents #WebDevelopment