And the carousel is done. Great job, you're now a carousel genius!
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.
- 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.