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.

Chapters
0:00 - Introduction
0:51 - Finished simple-carousel demo
01:20 - Lit starter kit setup
02:20 - Defining the simple-carousel
03:08 - Passing in child elements
Shadow DOM
:slotted()
06:10 - Carousel slide-button!
07:12 - Using slide-button in simple-carousel
08:05 - SVG and styles
10:03 - Animations
12:18 - Use simple-carousel in React!
14:02 - Wrap up

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

#Lit #WebComponents #WebDevelopment

[RaphaelMattos_atCW]

Congratulations on the new videos series. Even as a veteran Lit developer, I really enjoy this kind of content. It's always useful to see how other devs work with Lit, and how flexible it is. There's always something to learn. Also, I'm both amused and a little scared of Andrew's enthusiasm. Brilliant stuff!

[mag]

This dude has the time of his life while teaching his lit stuff. :D
Thanks for all your inputs :)

[TheAcademik]

It's really cool how easy it seems to enable framework interop with WebComponents. What are some better ways for scoping the hidden styles to the carousel element? Should we be altering the style attribute for higher priority? Should we just wrap each slotted element with it own container and apply styles to it?

[kishokz]

Please add videos how to use Lit components in SSR. Great initiative Lit Team 👍

[suar]

Can you build an Header and Footer with lit

[elmarhinz]

By which tool do you input all the code snippets that fast? You don't move the mouse around in between.

[domingoanez]

Is more logical and natural for these videos to be created using vanilla javascript, typescript should be optional.

[aj_shela]

Can you tell us how to setup locally from scratch?

[ikbo]

Can some big brained person explain to me while google has both angular and lit when there is so much overlap?

[elmarhinz]

I don't bring this to GitHub. The code still has to match the video. Yet more tidy I think:

```ts
private async navigateWithAnimation(
nextSlideOffset: number,
leavingAnimation: AnimationTuple,
enteringAnimation: AnimationTuple
) {

// elements
const previous =

const next =

// animations
const leaving =
const entering =

// flow
showSlide(next);
await Promise.all([leaving.finished, entering.finished]);
hideSlide(previous)
}
```

While composed symbols like "previousElement" are more verbose, I don't need this grade of verbosity inside a short function. In the parameters it is the opposite. Verbose parameters avoid tedious documentation. On the other hand shortenings like "leavingAnim" are really ugly. It's not the 70s any more, where memory was expensive and code completion missing.

Though I tend to say, comments should be replaced by speaking names as far as possible, this example also shows how a few comments as headlines can help to structure the code and shorten the amount of characters to read. Such we don't need to repeat the topic of the headline in each name in multiple places.