> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Carousel

> Scrollable container that cycles through children — carousel, reel, or marquee.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

Carousel cycles through content — slides, cards, images, anything. Each direct child becomes one slide. The same component handles interactive slideshows (arrows, dots, swipe), auto-advancing reels, and continuously scrolling marquees, all through configuration.

## Basic Usage

One slide visible at a time. Drag to navigate, or use the arrow buttons that appear on each side. Dots below show your position in the sequence:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbChzaG93X2RvdHM9VHJ1ZSwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy12aW9sZXQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctYW1iZXItNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(show_dots=True, css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-amber-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 0,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": false,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-amber-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Visibility

The `visible` parameter controls how many slides appear at once. It accepts integers and floats, each with different behavior.

### Multiple Slides

Set `visible` to a whole number to show that many slides simultaneously. The carousel advances through any remaining slides that don't fit. Use `gap` to add spacing between them:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":3.0,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-purple-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-red-500 rounded-lg","type":"Div","style":{"height":"120px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbCh2aXNpYmxlPTMsIGdhcD0xNiwgc2hvd19kb3RzPVRydWUsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1ibHVlLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxMjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctdmlvbGV0LTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWFtYmVyLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLXB1cnBsZS01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjEyMHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1yZWQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxMjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(visible=3, gap=16, show_dots=True, css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "120px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "120px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "120px"})
        Div(css_class="bg-amber-500 rounded-lg", style={"height": "120px"})
        Div(css_class="bg-purple-500 rounded-lg", style={"height": "120px"})
        Div(css_class="bg-red-500 rounded-lg", style={"height": "120px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 3.0,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 0,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": false,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          },
          {
            "cssClass": "bg-amber-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          },
          {
            "cssClass": "bg-purple-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          },
          {
            "cssClass": "bg-red-500 rounded-lg",
            "type": "Div",
            "style": {"height": "120px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

### Peek

A decimal value for `visible` shows partial slides at the edges. `visible=1.3` means "show 1.3 slides" — one full slide plus 30% of the next one peeking in from the side:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1.3,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"center","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbCh2aXNpYmxlPTEuMywgc2hvd19kb3RzPVRydWUsIGFsaWduPSJjZW50ZXIiLCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctYmx1ZS01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTYwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLXZpb2xldC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1hbWJlci01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCg">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(visible=1.3, show_dots=True, align="center", css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-amber-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1.3,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 0,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": false,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "center",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-amber-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

### Align

The `align` parameter controls where the active slide sits in the viewport. It only has a visible effect when `visible` is a non-integer (peek) or when showing multiple slides — with `visible=1` every alignment looks the same since the slide fills the viewport.

* `"start"` (default) — active slide flush to the leading edge. Peek appears on the trailing side only.
* `"center"` — active slide centered. Peek appears equally on both sides.
* `"end"` — active slide flush to the trailing edge. Peek appears on the leading side only.

### Dim Inactive

Reduce the opacity of slides that aren't in focus. This draws the eye to the active slide while still showing what's around it. Pairs naturally with peek:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1.3,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":true,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"center","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbCh2aXNpYmxlPTEuMywgZGltX2luYWN0aXZlPVRydWUsIHNob3dfZG90cz1UcnVlLCBhbGlnbj0iY2VudGVyIiwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy12aW9sZXQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctYW1iZXItNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(visible=1.3, dim_inactive=True, show_dots=True, align="center", css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-amber-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1.3,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 0,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": true,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "center",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-amber-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Transitions

### Fade

Crossfade between slides instead of sliding them. The outgoing slide fades out while the incoming one fades in, with no horizontal movement. Works well for ambient displays or hero images where the sliding motion would be distracting. In fade mode, `gap` is ignored so slides fill the viewport cleanly.

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1.0,"gap":16,"direction":"left","loop":true,"autoAdvance":2000,"continuous":false,"speed":2,"effect":"fade","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbChlZmZlY3Q9ImZhZGUiLCBzaG93X2RvdHM9VHJ1ZSwgYXV0b19hZHZhbmNlPTIwMDAsIHNob3dfY29udHJvbHM9RmFsc2UsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1ibHVlLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTYwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctdmlvbGV0LTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTYwcHgifSkK">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(effect="fade", show_dots=True, auto_advance=2000, show_controls=False, css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1.0,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 2000,
        "continuous": false,
        "speed": 2,
        "effect": "fade",
        "dimInactive": false,
        "showControls": false,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

### Auto Advance

Set `auto_advance` in milliseconds to cycle slides on a timer. The carousel pauses when the user hovers over it (disable with `pause_on_hover=False`). Loop is on by default, so it cycles forever:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":true,"autoAdvance":2000,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbChhdXRvX2FkdmFuY2U9MjAwMCwgc2hvd19kb3RzPVRydWUsIGNvbnRyb2xzX3Bvc2l0aW9uPSJvdXRzaWRlIiwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLXZpb2xldC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1ibHVlLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTYwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(auto_advance=2000, show_dots=True, controls_position="outside", css_class="w-full"):
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1,
        "gap": 16,
        "direction": "left",
        "loop": true,
        "autoAdvance": 2000,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": false,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Controls

### Controls Position

Arrow buttons sit outside the viewport by default, flanking the slides. Set `controls_position="overlay"` to layer them on top of the slides, or `"gutter"` to place them inline with the pagination dots.

<ComponentPreview json={{"view":{"cssClass":"gap-6 w-full","type":"Column","children":[{"content":"Outside (default)","type":"H3"},{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-purple-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"120px"}}]},{"content":"Overlay","type":"H3"},{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"overlay","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"120px"}}]},{"content":"Gutter","type":"H3"},{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"gutter","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-rose-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-cyan-500 rounded-lg","type":"Div","style":{"height":"120px"}},{"cssClass":"bg-lime-500 rounded-lg","type":"Div","style":{"height":"120px"}}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIENvbHVtbiwgRGl2LCBIMwoKd2l0aCBDb2x1bW4oZ2FwPTYsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICBIMygiT3V0c2lkZSAoZGVmYXVsdCkiKQogICAgd2l0aCBDYXJvdXNlbChzaG93X2RvdHM9VHJ1ZSwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgICAgICBEaXYoY3NzX2NsYXNzPSJiZy1hbWJlci01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjEyMHB4In0pCiAgICAgICAgRGl2KGNzc19jbGFzcz0iYmctcHVycGxlLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKICAgICAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKCiAgICBIMygiT3ZlcmxheSIpCiAgICB3aXRoIENhcm91c2VsKHNob3dfZG90cz1UcnVlLCBjb250cm9sc19wb3NpdGlvbj0ib3ZlcmxheSIsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICAgICAgRGl2KGNzc19jbGFzcz0iYmctYmx1ZS01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjEyMHB4In0pCiAgICAgICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjEyMHB4In0pCiAgICAgICAgRGl2KGNzc19jbGFzcz0iYmctdmlvbGV0LTUwMCByb3VuZGVkLWxnIiwgc3R5bGU9eyJoZWlnaHQiOiAiMTIwcHgifSkKCiAgICBIMygiR3V0dGVyIikKICAgIHdpdGggQ2Fyb3VzZWwoc2hvd19kb3RzPVRydWUsIGNvbnRyb2xzX3Bvc2l0aW9uPSJndXR0ZXIiLCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLXJvc2UtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxMjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWN5YW4tNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxMjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWxpbWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxMjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Column, Div, H3

    with Column(gap=6, css_class="w-full"):
        H3("Outside (default)")
        with Carousel(show_dots=True, css_class="w-full"):
            Div(css_class="bg-amber-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-purple-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-emerald-500 rounded-lg", style={"height": "120px"})

        H3("Overlay")
        with Carousel(show_dots=True, controls_position="overlay", css_class="w-full"):
            Div(css_class="bg-blue-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-emerald-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-violet-500 rounded-lg", style={"height": "120px"})

        H3("Gutter")
        with Carousel(show_dots=True, controls_position="gutter", css_class="w-full"):
            Div(css_class="bg-rose-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-cyan-500 rounded-lg", style={"height": "120px"})
            Div(css_class="bg-lime-500 rounded-lg", style={"height": "120px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-6 w-full",
        "type": "Column",
        "children": [
          {"content": "Outside (default)", "type": "H3"},
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "visible": 1,
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": false,
            "speed": 2,
            "effect": "slide",
            "dimInactive": false,
            "showControls": true,
            "controlsPosition": "outside",
            "showDots": true,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {
                "cssClass": "bg-amber-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-purple-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-emerald-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              }
            ]
          },
          {"content": "Overlay", "type": "H3"},
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "visible": 1,
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": false,
            "speed": 2,
            "effect": "slide",
            "dimInactive": false,
            "showControls": true,
            "controlsPosition": "overlay",
            "showDots": true,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {
                "cssClass": "bg-blue-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-emerald-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-violet-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              }
            ]
          },
          {"content": "Gutter", "type": "H3"},
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "visible": 1,
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": false,
            "speed": 2,
            "effect": "slide",
            "dimInactive": false,
            "showControls": true,
            "controlsPosition": "gutter",
            "showDots": true,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {
                "cssClass": "bg-rose-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-cyan-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              },
              {
                "cssClass": "bg-lime-500 rounded-lg",
                "type": "Div",
                "style": {"height": "120px"}
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

### No Loop

Set `loop=False` to stop at the ends instead of wrapping around. The arrow buttons automatically disappear when there's nowhere left to scroll:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"left","loop":false,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"outside","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbChsb29wPUZhbHNlLCBzaG93X2RvdHM9VHJ1ZSwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy12aW9sZXQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(loop=False, show_dots=True, css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 1,
        "gap": 16,
        "direction": "left",
        "loop": false,
        "autoAdvance": 0,
        "continuous": false,
        "speed": 2,
        "effect": "slide",
        "dimInactive": false,
        "showControls": true,
        "controlsPosition": "outside",
        "showDots": true,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "160px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Direction

Carousels scroll horizontally by default (`direction="left"`). Set `direction="down"` or `direction="up"` for vertical scrolling. The carousel automatically measures the first slide's height to determine the viewport size, and vertical carousels honor `gap` the same way horizontal ones do.

Vertical carousels are great for status feeds, departure boards, or cycling through messages in a fixed-height area. When you want arrows and dots to share the same side gutter, set `controls_position="gutter"`:

<ComponentPreview json={{"view":{"cssClass":"gap-6 w-full","type":"Column","children":[{"content":"Vertical with controls","type":"H3"},{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"down","loop":true,"autoAdvance":0,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":true,"controlsPosition":"gutter","showDots":true,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}}]},{"content":"Vertical reel (auto advance)","type":"H3"},{"cssClass":"w-full","type":"Carousel","visible":1,"gap":16,"direction":"down","loop":true,"autoAdvance":2000,"continuous":false,"speed":2,"effect":"slide","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":false,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"160px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"160px"}}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIENvbHVtbiwgRGl2LCBIMwoKd2l0aCBDb2x1bW4oZ2FwPTYsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICBIMygiVmVydGljYWwgd2l0aCBjb250cm9scyIpCiAgICB3aXRoIENhcm91c2VsKGRpcmVjdGlvbj0iZG93biIsIHNob3dfZG90cz1UcnVlLCBjb250cm9sc19wb3NpdGlvbj0iZ3V0dGVyIiwgbG9vcD1UcnVlLCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLXZpb2xldC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCgogICAgSDMoIlZlcnRpY2FsIHJlZWwgKGF1dG8gYWR2YW5jZSkiKQogICAgd2l0aCBDYXJvdXNlbChkaXJlY3Rpb249ImRvd24iLCBhdXRvX2FkdmFuY2U9MjAwMCwgc2hvd19jb250cm9scz1GYWxzZSwgbG9vcD1UcnVlLCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICIxNjBweCJ9KQogICAgICAgIERpdihjc3NfY2xhc3M9ImJnLXZpb2xldC01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjE2MHB4In0pCg">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Column, Div, H3

    with Column(gap=6, css_class="w-full"):
        H3("Vertical with controls")
        with Carousel(direction="down", show_dots=True, controls_position="gutter", loop=True, css_class="w-full"):
            Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
            Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
            Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})

        H3("Vertical reel (auto advance)")
        with Carousel(direction="down", auto_advance=2000, show_controls=False, loop=True, css_class="w-full"):
            Div(css_class="bg-blue-500 rounded-lg", style={"height": "160px"})
            Div(css_class="bg-emerald-500 rounded-lg", style={"height": "160px"})
            Div(css_class="bg-violet-500 rounded-lg", style={"height": "160px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-6 w-full",
        "type": "Column",
        "children": [
          {"content": "Vertical with controls", "type": "H3"},
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "visible": 1,
            "gap": 16,
            "direction": "down",
            "loop": true,
            "autoAdvance": 0,
            "continuous": false,
            "speed": 2,
            "effect": "slide",
            "dimInactive": false,
            "showControls": true,
            "controlsPosition": "gutter",
            "showDots": true,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {
                "cssClass": "bg-blue-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              },
              {
                "cssClass": "bg-emerald-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              },
              {
                "cssClass": "bg-violet-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              }
            ]
          },
          {"content": "Vertical reel (auto advance)", "type": "H3"},
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "visible": 1,
            "gap": 16,
            "direction": "down",
            "loop": true,
            "autoAdvance": 2000,
            "continuous": false,
            "speed": 2,
            "effect": "slide",
            "dimInactive": false,
            "showControls": false,
            "controlsPosition": "outside",
            "showDots": false,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {
                "cssClass": "bg-blue-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              },
              {
                "cssClass": "bg-emerald-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              },
              {
                "cssClass": "bg-violet-500 rounded-lg",
                "type": "Div",
                "style": {"height": "160px"}
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

Set `direction="right"` to scroll in the opposite horizontal direction (content moves right to left).

## Marquee

Set `continuous=True` for smooth, never-ending scroll. Unlike auto-advance which pauses between slides, continuous mode scrolls at a constant velocity — like a news ticker or stock tape. Control the speed from 1 (gentle drift) to 10 (racing).

Children are automatically duplicated behind the scenes so the loop is seamless regardless of how many items you provide.

Stack multiple marquees at different speeds for a layered, dynamic feel:

<ComponentPreview json={{"view":{"cssClass":"gap-4 w-full","type":"Column","children":[{"cssClass":"w-full","type":"Carousel","gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":true,"speed":1,"effect":"slide","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":false,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"mx-2","type":"Badge","label":"Python","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"React","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"TypeScript","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Tailwind","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Embla","variant":"success"},{"cssClass":"mx-2","type":"Badge","label":"Prefab","variant":"success"}],"visible":null},{"cssClass":"w-full","type":"Carousel","gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":true,"speed":3,"effect":"slide","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":false,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"mx-2","type":"Badge","label":"Charts","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Tables","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Forms","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Buttons","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Cards","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Dialogs","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Mermaid","variant":"success"},{"cssClass":"mx-2","type":"Badge","label":"Carousel","variant":"success"}],"visible":null},{"cssClass":"w-full","type":"Carousel","gap":16,"direction":"left","loop":true,"autoAdvance":0,"continuous":true,"speed":6,"effect":"slide","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":false,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"mx-2","type":"Badge","label":"Alerts","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Reports","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Events","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Tasks","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Metrics","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Logs","variant":"default"},{"cssClass":"mx-2","type":"Badge","label":"Realtime","variant":"success"},{"cssClass":"mx-2","type":"Badge","label":"Streaming","variant":"success"}],"visible":null}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIENvbHVtbiwgQmFkZ2UKCndpdGggQ29sdW1uKGdhcD00LCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgd2l0aCBDYXJvdXNlbChjb250aW51b3VzPVRydWUsIHNwZWVkPTEsIHNob3dfY29udHJvbHM9RmFsc2UsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICAgICAgQmFkZ2UoIlB5dGhvbiIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIlJlYWN0IiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiVHlwZVNjcmlwdCIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIlRhaWx3aW5kIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiRW1ibGEiLCB2YXJpYW50PSJzdWNjZXNzIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiUHJlZmFiIiwgdmFyaWFudD0ic3VjY2VzcyIsIGNzc19jbGFzcz0ibXgtMiIpCgogICAgd2l0aCBDYXJvdXNlbChjb250aW51b3VzPVRydWUsIHNwZWVkPTMsIHNob3dfY29udHJvbHM9RmFsc2UsIGNzc19jbGFzcz0idy1mdWxsIik6CiAgICAgICAgQmFkZ2UoIkNoYXJ0cyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIlRhYmxlcyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIkZvcm1zIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiQnV0dG9ucyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIkNhcmRzIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiRGlhbG9ncyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIk1lcm1haWQiLCB2YXJpYW50PSJzdWNjZXNzIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiQ2Fyb3VzZWwiLCB2YXJpYW50PSJzdWNjZXNzIiwgY3NzX2NsYXNzPSJteC0yIikKCiAgICB3aXRoIENhcm91c2VsKGNvbnRpbnVvdXM9VHJ1ZSwgc3BlZWQ9Niwgc2hvd19jb250cm9scz1GYWxzZSwgY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgICAgICBCYWRnZSgiQWxlcnRzIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiUmVwb3J0cyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIkV2ZW50cyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIlRhc2tzIiwgY3NzX2NsYXNzPSJteC0yIikKICAgICAgICBCYWRnZSgiTWV0cmljcyIsIGNzc19jbGFzcz0ibXgtMiIpCiAgICAgICAgQmFkZ2UoIkxvZ3MiLCBjc3NfY2xhc3M9Im14LTIiKQogICAgICAgIEJhZGdlKCJSZWFsdGltZSIsIHZhcmlhbnQ9InN1Y2Nlc3MiLCBjc3NfY2xhc3M9Im14LTIiKQogICAgICAgIEJhZGdlKCJTdHJlYW1pbmciLCB2YXJpYW50PSJzdWNjZXNzIiwgY3NzX2NsYXNzPSJteC0yIikK">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Column, Badge

    with Column(gap=4, css_class="w-full"):
        with Carousel(continuous=True, speed=1, show_controls=False, css_class="w-full"):
            Badge("Python", css_class="mx-2")
            Badge("React", css_class="mx-2")
            Badge("TypeScript", css_class="mx-2")
            Badge("Tailwind", css_class="mx-2")
            Badge("Embla", variant="success", css_class="mx-2")
            Badge("Prefab", variant="success", css_class="mx-2")

        with Carousel(continuous=True, speed=3, show_controls=False, css_class="w-full"):
            Badge("Charts", css_class="mx-2")
            Badge("Tables", css_class="mx-2")
            Badge("Forms", css_class="mx-2")
            Badge("Buttons", css_class="mx-2")
            Badge("Cards", css_class="mx-2")
            Badge("Dialogs", css_class="mx-2")
            Badge("Mermaid", variant="success", css_class="mx-2")
            Badge("Carousel", variant="success", css_class="mx-2")

        with Carousel(continuous=True, speed=6, show_controls=False, css_class="w-full"):
            Badge("Alerts", css_class="mx-2")
            Badge("Reports", css_class="mx-2")
            Badge("Events", css_class="mx-2")
            Badge("Tasks", css_class="mx-2")
            Badge("Metrics", css_class="mx-2")
            Badge("Logs", css_class="mx-2")
            Badge("Realtime", variant="success", css_class="mx-2")
            Badge("Streaming", variant="success", css_class="mx-2")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4 w-full",
        "type": "Column",
        "children": [
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": true,
            "speed": 1,
            "effect": "slide",
            "dimInactive": false,
            "showControls": false,
            "controlsPosition": "outside",
            "showDots": false,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {"cssClass": "mx-2", "type": "Badge", "label": "Python", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "React", "variant": "default"},
              {
                "cssClass": "mx-2",
                "type": "Badge",
                "label": "TypeScript",
                "variant": "default"
              },
              {"cssClass": "mx-2", "type": "Badge", "label": "Tailwind", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Embla", "variant": "success"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Prefab", "variant": "success"}
            ],
            "visible": null
          },
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": true,
            "speed": 3,
            "effect": "slide",
            "dimInactive": false,
            "showControls": false,
            "controlsPosition": "outside",
            "showDots": false,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {"cssClass": "mx-2", "type": "Badge", "label": "Charts", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Tables", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Forms", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Buttons", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Cards", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Dialogs", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Mermaid", "variant": "success"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Carousel", "variant": "success"}
            ],
            "visible": null
          },
          {
            "cssClass": "w-full",
            "type": "Carousel",
            "gap": 16,
            "direction": "left",
            "loop": true,
            "autoAdvance": 0,
            "continuous": true,
            "speed": 6,
            "effect": "slide",
            "dimInactive": false,
            "showControls": false,
            "controlsPosition": "outside",
            "showDots": false,
            "pauseOnHover": true,
            "align": "start",
            "slidesToScroll": 1,
            "drag": true,
            "children": [
              {"cssClass": "mx-2", "type": "Badge", "label": "Alerts", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Reports", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Events", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Tasks", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Metrics", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Logs", "variant": "default"},
              {"cssClass": "mx-2", "type": "Badge", "label": "Realtime", "variant": "success"},
              {
                "cssClass": "mx-2",
                "type": "Badge",
                "label": "Streaming",
                "variant": "success"
              }
            ],
            "visible": null
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

### Sized Marquee Slides

Combine `continuous` with `visible` to control slide sizing within the marquee. Without `visible`, each item uses its natural width (badges wrap tightly). With `visible=4`, each item is sized to 25% of the viewport:

<ComponentPreview json={{"view":{"cssClass":"w-full","type":"Carousel","visible":4.0,"gap":12,"direction":"left","loop":true,"autoAdvance":0,"continuous":true,"speed":3,"effect":"slide","dimInactive":false,"showControls":false,"controlsPosition":"outside","showDots":false,"pauseOnHover":true,"align":"start","slidesToScroll":1,"drag":true,"children":[{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"80px"}},{"cssClass":"bg-emerald-500 rounded-lg","type":"Div","style":{"height":"80px"}},{"cssClass":"bg-violet-500 rounded-lg","type":"Div","style":{"height":"80px"}},{"cssClass":"bg-amber-500 rounded-lg","type":"Div","style":{"height":"80px"}},{"cssClass":"bg-purple-500 rounded-lg","type":"Div","style":{"height":"80px"}},{"cssClass":"bg-blue-500 rounded-lg","type":"Div","style":{"height":"80px"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ2Fyb3VzZWwsIERpdgoKd2l0aCBDYXJvdXNlbChjb250aW51b3VzPVRydWUsIHNwZWVkPTMsIHNob3dfY29udHJvbHM9RmFsc2UsIHZpc2libGU9NCwgZ2FwPTEyLCBjc3NfY2xhc3M9InctZnVsbCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctYmx1ZS01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjgwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICI4MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy12aW9sZXQtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICI4MHB4In0pCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1hbWJlci01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjgwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLXB1cnBsZS01MDAgcm91bmRlZC1sZyIsIHN0eWxlPXsiaGVpZ2h0IjogIjgwcHgifSkKICAgIERpdihjc3NfY2xhc3M9ImJnLWJsdWUtNTAwIHJvdW5kZWQtbGciLCBzdHlsZT17ImhlaWdodCI6ICI4MHB4In0pCg">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Carousel, Div

    with Carousel(continuous=True, speed=3, show_controls=False, visible=4, gap=12, css_class="w-full"):
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "80px"})
        Div(css_class="bg-emerald-500 rounded-lg", style={"height": "80px"})
        Div(css_class="bg-violet-500 rounded-lg", style={"height": "80px"})
        Div(css_class="bg-amber-500 rounded-lg", style={"height": "80px"})
        Div(css_class="bg-purple-500 rounded-lg", style={"height": "80px"})
        Div(css_class="bg-blue-500 rounded-lg", style={"height": "80px"})
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-full",
        "type": "Carousel",
        "visible": 4.0,
        "gap": 12,
        "direction": "left",
        "loop": true,
        "autoAdvance": 0,
        "continuous": true,
        "speed": 3,
        "effect": "slide",
        "dimInactive": false,
        "showControls": false,
        "controlsPosition": "outside",
        "showDots": false,
        "pauseOnHover": true,
        "align": "start",
        "slidesToScroll": 1,
        "drag": true,
        "children": [
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          },
          {
            "cssClass": "bg-emerald-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          },
          {
            "cssClass": "bg-violet-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          },
          {
            "cssClass": "bg-amber-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          },
          {
            "cssClass": "bg-purple-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          },
          {
            "cssClass": "bg-blue-500 rounded-lg",
            "type": "Div",
            "style": {"height": "80px"}
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Carousel Parameters">
  <ParamField body="visible" type="float | None" default="1">
    How many slides to show at once. Whole numbers (`3`) show that many full slides. Decimals (`1.3`) show partial slides at the edges — 1.3 means one full slide plus 30% of the next. `None` uses each slide's natural width (default for marquee when `visible` is omitted).
  </ParamField>

  <ParamField body="gap" type="int" default="16">
    Pixels between slides.
  </ParamField>

  <ParamField body="height" type="int | None" default="None">
    Fixed height in pixels. Vertical carousels auto-detect from the first slide when omitted.
  </ParamField>

  <ParamField body="direction" type="str" default="left">
    Scroll direction: `"left"` (horizontal, default), `"right"` (horizontal, reversed), `"down"` (vertical), or `"up"` (vertical, reversed). For auto-advance and marquee, this controls which way automatic motion goes. For manual navigation, users can scroll either direction regardless.
  </ParamField>

  <ParamField body="loop" type="bool" default="True">
    Seamless infinite looping. When disabled, the carousel stops at the first and last slides.
  </ParamField>

  <ParamField body="auto_advance" type="int" default="0">
    Milliseconds between auto-advances. `0` disables auto-advance. The carousel pauses on hover by default.
  </ParamField>

  <ParamField body="continuous" type="bool" default="False">
    Smooth continuous scroll at constant velocity (marquee mode). Children are auto-duplicated for seamless looping. When omitted, `visible` defaults to `None` (natural sizing).
  </ParamField>

  <ParamField body="speed" type="int" default="2">
    Scroll speed for continuous mode, from 1 (gentle) to 10 (fast).
  </ParamField>

  <ParamField body="effect" type="str" default="slide">
    Transition effect: `"slide"` (horizontal/vertical movement) or `"fade"` (crossfade in place).
  </ParamField>

  <ParamField body="dim_inactive" type="bool" default="False">
    Reduce opacity on non-active slides. Most effective with peek or multiple visible slides.
  </ParamField>

  <ParamField body="show_controls" type="bool" default="True">
    Show previous/next navigation arrows.
  </ParamField>

  <ParamField body="controls_position" type="str" default="outside">
    Arrow placement: `"overlay"` positions arrows on top of the slides, `"outside"` places them flanking the viewport, and `"gutter"` places them wherever dots render.
  </ParamField>

  <ParamField body="show_dots" type="bool" default="False">
    Show pagination dots indicating current position and total slides.
  </ParamField>

  <ParamField body="pause_on_hover" type="bool" default="True">
    Pause auto-advance or continuous scroll when the user hovers over the carousel.
  </ParamField>

  <ParamField body="align" type="str" default="start">
    Slide alignment within the viewport: `"start"`, `"center"`, or `"end"`. Most noticeable with peek — `"center"` shows equal peek on both sides.
  </ParamField>

  <ParamField body="slides_to_scroll" type="int" default="1">
    How many slides to advance per navigation step.
  </ParamField>

  <ParamField body="drag" type="bool" default="True">
    Allow drag/swipe to navigate.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes for the carousel container.
  </ParamField>
</Card>

## Protocol Reference

```json Carousel theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Carousel",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "visible?": "number",
  "gap?": 16,
  "height?": "number",
  "direction?": "left | right | up | down",
  "loop?": true,
  "autoAdvance?": 0,
  "continuous?": false,
  "speed?": 2,
  "effect?": "slide | fade",
  "dimInactive?": false,
  "showControls?": true,
  "controlsPosition?": "overlay | outside | gutter",
  "showDots?": false,
  "pauseOnHover?": true,
  "align?": "start | center | end",
  "slidesToScroll?": 1,
  "drag?": true,
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Carousel](/protocol/carousel).