UMD Web Components Library
    Preparing search index...

    Variable carouselWideConst

    carouselWide: ComponentRegistration = ...

    Wide Carousel

    A full-width carousel component with slide previews, optimized for showcasing featured content with optional text overlays.

    <umd-element-carousel-wide>

    • slides - Container for carousel slides (required, accepts: figure or div elements)
      • Each slide should contain:
        • An img element with alt text (required)
        • An element with data-headline attribute for headlines (optional)
        • An element with data-text attribute for descriptions (optional)
    • title - Accessible title for the carousel (default: "Animated Image Carousel")
    • data-theme - Visual theme:
      • light - Light theme (default)
      • dark - Dark theme
    • animation-time - Animation duration in milliseconds (default: 500)
    • mobile-breakpoint - Breakpoint for mobile behavior in pixels (default: 650)
    • resize - Triggers carousel size recalculation
    <umd-element-carousel-wide title="Featured Stories">
      <div slot="slides">
        <figure>
          <img src="hero1.jpg" alt="Research breakthrough">
          <div data-headline>
            <h2>Major Research Discovery</h2>
          </div>
          <div data-text>
            <p>Scientists make groundbreaking discovery in quantum computing.</p>
          </div>
        </figure>
        <figure>
          <img src="hero2.jpg" alt="Campus expansion">
          <div data-headline>
            <h2>New Science Center Opens</h2>
          </div>
          <div data-text>
            <p>State-of-the-art facility enhances research capabilities.</p>
          </div>
        </figure>
      </div>
    </umd-element-carousel-wide>

    1.13.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributesObserved Attributes