Introduction

In this tutorial, you'll build a simple carousel element animated with the @lit-labs/motion package's animate directive.

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!

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.

• 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!