---
layout: pattern
title: Carousel
description: |
  This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the dialog element.
  <aside style="max-inline-size: fit-content;" class="aside flow bg-tertiary-box-bg color-tertiary-box-text"><p class="cluster "><span class="aside__icon box-block "><svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg">   <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path> </svg></span><strong>Important</strong></p><div class=" flow"> This pattern uses <a href="https://open-props.style">Open Props</a> </div></aside>
  <br><br>
  <a href="https://www.youtube.com/watch?v=CXJv6zM003M">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/carousel">Source on Github</a>
date: 2022-06-01
height: 450
---

This pattern shows how to create a color-adaptive, responsive, and accessible
carousel component.

{% Aside 'important' %}
This pattern uses [Open Props](https://open-props.style)
{% endAside %}

<a href="https://www.youtube.com/watch?v=CXJv6zM003M">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/carousel">Source on Github</a>
