09

And the carousel is done. Great job, you're now a carousel genius!

Recap

Review the steps to make the carousel:

• Setup the element DOM with a slot and some styling
• Add a selected property that displays the selected item
  • Create the property
  • Render the selected item
  • Add a way to change the selected item
• Prepare to animate the selected item into view.
  • Modify the template DOM by adding a slot for the previous item
  • Slot the previous item
  • Position the elements
• Use the animate directive from the @lit-labs/package to add animation.

Check out the code again if you'd like.

Related Documentation

• @lit-labs/motion
• @lit-labs
• FLIP Animation
• tweening
• Styling components
• Directives
• Element expressions

Extra Credit

• Add additional controls to set the selected item; try buttons or swiping.
• Expose an option to disable animations or configure animation settings like duration and easing. Hint, check out the @lit-labs/motion readme.
• Add a vertical mode that animates top <-> bottom instead of left <-> right.