Introduction
In this tutorial, you'll build a simple carousel element animated with the @lit-labs/motion
package's animate
directive.
Background
Permalink to “Background”Carousels are a great way to show a large amount of related content in a small visual space. Typically, the selected item animates into and out of view and can be manipulated by swiping or clicking. Carousels are very commonly used and knowing how to create one is an excellent skill to learn!
Preview
Permalink to “Preview”Here's a preview of the motion-carousel
element. Try clicking the carousel content to advance the selected item. Hold down shift while clicking to move in the opposite direction.
Tasks
Permalink to “Tasks”- Setup the element DOM and styling
- Add a
selected
property that displays the selected item - Prepare to animate the selected item into view.
- Use the
animate
directive from the@lit-labs/package
to add animation.
You're going to be a carousel genius!