{
  "tag": "ed-carousel",
  "kind": "component",
  "summary": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/carousel/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/carousel/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-button"
  ],
  "use": [
    "Browsing several photos of one object — a property, a machine, a company vehicle — one at a time",
    "Showing the pictures attached to a single asset in the asset register, where one image at a time is right",
    "Supplementary content collections — related items such as testimonials, reference screenshots, or example scenarios, where missing any individual item does not break understanding",
    "Showing a few reference screenshots or example scenarios in a help area, advancing with arrows or pagination"
  ],
  "notFor": [
    {
      "when": "Primary navigation, or the main way to move between sections",
      "instead": "[Tabs](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group) or a navigation structure"
    },
    {
      "when": "Onboarding, setup, or any guided process the user completes step by step — a carousel presents content to browse, it does not carry a task",
      "instead": "[Wizard](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard)"
    },
    {
      "when": "Content that must be compared side by side, since users cannot compare items they cannot see simultaneously",
      "instead": "a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid) or a plain `<table>` (comparing values across many records), or a [Split Panel](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/split-panel) (two pieces of content side by side)"
    }
  ],
  "rules": [
    {
      "id": "carousel/optional-content-only",
      "rule": "Never put critical information (critical business information among it), required reading, key actions, key calls to action, or any content that all users must read inside a carousel; present it inline as static content instead. Treat every slide after the first as optional content, not primary content.",
      "why": "Most users never see past the first slide, and every slide after the first is hidden by default."
    },
    {
      "id": "carousel/navigation-affordance",
      "rule": "Use navigation arrows and pagination together for the clearest affordance. When side arrows are absent, use the scroll hint to signal that more content exists, and never rely on dots alone as the only affordance.",
      "check": "error"
    },
    {
      "id": "carousel/seven-slides",
      "rule": "Keep the slide count to 7 or fewer; restructure deeper collections of equal importance as a browsable list or grid.",
      "check": "error"
    },
    {
      "id": "carousel/standalone-slides",
      "rule": "Design every slide to stand alone — never build a narrative across slides."
    },
    {
      "id": "carousel/consistent-slides",
      "rule": "Keep slide structure visually consistent across all slides in the same carousel."
    },
    {
      "id": "carousel/autoplay",
      "rule": "Never autoplay content users need to read or act on. When autoplay is active, enable loop, and pair it with a visible pause button of your own that toggles `autoplay`.",
      "why": "WCAG 2.2.2 requires a way to stop motion that runs longer than five seconds, and the built-in pause on hover and focus lasts only while the pointer or focus stays.",
      "check": "error"
    },
    {
      "id": "carousel/vertical-height",
      "rule": "Never use vertical orientation without setting an explicit height when slide heights vary.",
      "check": "warning"
    },
    {
      "id": "carousel/vertical-dots-only",
      "rule": "Never expect side arrows or numbered-button pagination in vertical orientation — both are quietly ignored there, and vertical carousels always paginate with dots.",
      "check": "error",
      "covered": true
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "loop",
        "property": "loop",
        "type": "boolean",
        "default": "false",
        "description": "When set, allows the user to navigate the carousel in the same direction indefinitely."
      },
      {
        "name": "navigation",
        "property": "navigation",
        "type": "boolean",
        "default": "false",
        "description": "When set, show the previous/next navigation arrows beside the carousel. Ignored in vertical orientation."
      },
      {
        "name": "pagination",
        "property": "pagination",
        "type": "boolean",
        "default": "false",
        "description": "When set, show the carousel's pagination indicators."
      },
      {
        "name": "pagination-variant",
        "property": "paginationVariant",
        "type": "'dots' | 'buttons'",
        "default": "'dots'",
        "description": "The pagination variant. `dots` shows dot indicators; `buttons` shows numbered page buttons\nwith their own previous/next arrows inside the pagination bar (independent of `navigation`).\nForced to `dots` in vertical orientation."
      },
      {
        "name": "autoplay",
        "property": "autoplay",
        "type": "boolean",
        "default": "false",
        "description": "When set, the slides will scroll automatically when the user is not interacting with them."
      },
      {
        "name": "autoplay-interval",
        "property": "autoplayInterval",
        "type": "number",
        "default": "3000",
        "description": "Specifies the amount of time, in milliseconds, between each automatic scroll."
      },
      {
        "name": "slides-per-page",
        "property": "slidesPerPage",
        "type": "number",
        "default": "1",
        "description": "Specifies how many slides should be shown at a given time."
      },
      {
        "name": "slides-per-move",
        "property": "slidesPerMove",
        "type": "number",
        "default": "1",
        "description": "Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`\ngreater than one. It can't be higher than `slides-per-page`."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "Specifies the orientation in which the carousel will lay out."
      },
      {
        "name": "mouse-dragging",
        "property": "mouseDragging",
        "type": "boolean",
        "default": "false",
        "description": "When set, it is possible to scroll through the slides by dragging them with the mouse."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "previous",
        "parameters": [
          {
            "name": "behavior",
            "type": "ScrollBehavior",
            "description": "The behavior used for scrolling."
          }
        ],
        "description": "Move the carousel backward by `slides-per-move` slides."
      },
      {
        "name": "next",
        "parameters": [
          {
            "name": "behavior",
            "type": "ScrollBehavior",
            "description": "The behavior used for scrolling."
          }
        ],
        "description": "Move the carousel forward by `slides-per-move` slides."
      },
      {
        "name": "goToSlide",
        "parameters": [
          {
            "name": "index",
            "type": "number",
            "description": "The slide index."
          },
          {
            "name": "behavior",
            "type": "ScrollBehavior",
            "description": "The behavior used for scrolling."
          }
        ],
        "description": "Scrolls the carousel to the slide specified by `index`."
      },
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-slide-change",
        "react": "onEdSlideChange",
        "type": "{ index: number, slide: EdCarouselItem }",
        "description": "Emitted when the active slide changes."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The carousel's main content, one or more `<ed-carousel-item>` elements."
      },
      {
        "name": "next-icon",
        "description": "Optional next icon to use instead of the default. Works best with `<ed-icon>`."
      },
      {
        "name": "previous-icon",
        "description": "Optional previous icon to use instead of the default. Works best with `<ed-icon>`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-carousel-aspect-ratio",
        "default": "16/9",
        "description": "The aspect ratio of each slide."
      },
      {
        "name": "--ed-carousel-scroll-hint",
        "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint."
      },
      {
        "name": "--ed-carousel-slide-gap",
        "default": "var(--ed-space-4)",
        "description": "The space between each slide."
      }
    ],
    "parts": [
      {
        "name": "base",
        "description": "The carousel's internal wrapper."
      },
      {
        "name": "scroll-container",
        "description": "The scroll container that wraps the slides."
      },
      {
        "name": "pagination",
        "description": "The pagination indicators wrapper."
      },
      {
        "name": "pagination-item",
        "description": "The pagination indicator."
      },
      {
        "name": "pagination-item-active",
        "description": "Applied when the item is active."
      },
      {
        "name": "navigation",
        "description": "The navigation wrapper."
      },
      {
        "name": "navigation-button",
        "description": "The navigation button."
      },
      {
        "name": "navigation-button-previous",
        "description": "Applied to the previous button."
      },
      {
        "name": "navigation-button-next",
        "description": "Applied to the next button."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/carousel/carousel.js';",
  "react": {
    "component": "EdCarousel",
    "import": "import EdCarousel from '@eurodata/eurodata-ui/dist/react/carousel/index.js';"
  }
}