WRNexusJSDoc/app/pages/components/carousel.wrn

page Carouselcomponent {
  seo {
    title = "Carousel component"
    description = "Theme-aware, responsive carousel component."
  }

  view {
    <div class="docs-shell">
      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
      <header class="topbar">
        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
      </header>
      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>1 slots</span><span>10 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Carousel
  size=&quot;default&quot;
  color=&quot;primary&quot;
  title=&quot;title&quot;
  description=&quot;description&quot;
  items=&quot;[]&quot;
/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Carousel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>activeIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>slidesPerView</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;0.75rem&quot;</code></td></tr><tr><td><code>showPagination</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoPlay</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoplayInterval</code></td><td><code>number</code></td><td>Optional</td><td><code>4000</code></td></tr><tr><td><code>isInfiniteLoop</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isRTL</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isCentered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isDraggable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoHeight</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isSnap</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showCounter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>thumbnails</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;none&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Content carousel&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>initialize</code></li><li><code>change</code></li><li><code>previous</code></li><li><code>next</code></li><li><code>play</code></li><li><code>pause</code></li><li><code>reachStart</code></li><li><code>reachEnd</code></li><li><code>dragStart</code></li><li><code>dragEnd</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/carousel.wrn</code></p><pre data-language="wrn"><code>// Interactive, hydration-safe content carousel.
component Carousel &#123;
  props &#123;
    @event initialize = function
    @event change = function
    @event previous = function
    @event next = function
    @event play = function
    @event pause = function
    @event reachStart = function
    @event reachEnd = function
    @event dragStart = function
    @event dragEnd = function
    size = &quot;default&quot;
    color = &quot;primary&quot;
    title = &quot;&quot;
    description = &quot;&quot;
    items = []
    activeIndex = 0
    slidesPerView = 1
    gap = &quot;0.75rem&quot;
    showPagination = false
    isAutoPlay = false
    autoplayInterval = 4000
    isInfiniteLoop = false
    isRTL = false
    isCentered = false
    isDraggable = false
    isAutoHeight = false
    isSnap = false
    showCounter = false
    thumbnails = &quot;none&quot;
    ariaLabel = &quot;Content carousel&quot;
    variant = &quot;default&quot;
    class = &quot;&quot;
  &#125;

  state currentIndex = activeIndex
  state playing = false
  state dragOrigin = null
  state dragOffset = 0
  state autoplayTimer = null
  state carouselRoot = null

  functions &#123;
    function slideCount() &#123;
      return items.length
    &#125;

    function maximumIndex(count, visible) &#123;
      count = slideCount()
      visible = Math.max(1, Number(slidesPerView) || 1)
      if (isCentered || isSnap) &#123;
        return Math.max(0, count - 1)
      &#125;
      return Math.max(0, count - visible)
    &#125;

    function normalizedIndex(index, maximum) &#123;
      maximum = maximumIndex()
      if (slideCount() === 0) &#123;
        return 0
      &#125;
      if (isInfiniteLoop) &#123;
        if (index &lt; 0) &#123;
          return maximum
        &#125;
        if (index &gt; maximum) &#123;
          return 0
        &#125;
      &#125;
      return Math.max(0, Math.min(index, maximum))
    &#125;

    function rememberRoot(sourceEvent, root) &#123;
      if (!sourceEvent || !sourceEvent.currentTarget) &#123;
        return
      &#125;
      root = sourceEvent.currentTarget.closest(&quot;.wire-next--carousel&quot;)
      if (root) &#123;
        carouselRoot = root
      &#125;
    &#125;

    function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) &#123;
      rememberRoot(sourceEvent)
      root = carouselRoot
      if (!root) &#123;
        return
      &#125;
      if (isSnap) &#123;
        viewport = root.querySelector(&quot;.wire-next__carousel-viewport&quot;)
        slides = root.querySelectorAll(&quot;.wire-next__carousel-slide&quot;)
        slide = slides[index]
        if (viewport &amp;&amp; slide) &#123;
          viewport.scrollTo(&#123;
            left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
            behavior: &quot;smooth&quot;
          &#125;)
        &#125;
      &#125;
      thumbnails = root.querySelectorAll(&quot;.wire-next__carousel-thumbnails button&quot;)
      if (thumbnails[index]) &#123;
        thumbnail = thumbnails[index]
        rail = thumbnail.parentElement
        rail.scrollTo(&#123;
          left: thumbnail.offsetLeft - (rail.clientWidth - thumbnail.clientWidth) / 2,
          top: thumbnail.offsetTop - (rail.clientHeight - thumbnail.clientHeight) / 2,
          behavior: &quot;smooth&quot;
        &#125;)
      &#125;
    &#125;

    function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) &#123;
      if (!isSnap) &#123;
        return
      &#125;
      rememberRoot(sourceEvent)
      viewport = sourceEvent.currentTarget
      slides = viewport.querySelectorAll(&quot;.wire-next__carousel-slide&quot;)
      viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2
      closestIndex = currentIndex
      closestDistance = 1000000000
      slides.forEach(function (candidate, index) &#123;
        slideCenter = candidate.offsetLeft + candidate.clientWidth / 2
        distance = Math.abs(slideCenter - viewportCenter)
        if (distance &lt; closestDistance) &#123;
          closestDistance = distance
          closestIndex = index
        &#125;
      &#125;)
      closestIndex = normalizedIndex(closestIndex)
      if (closestIndex !== currentIndex) &#123;
        previousIndex = currentIndex
        currentIndex = closestIndex
        $emit(&quot;change&quot;, &#123;
          index: currentIndex,
          previousIndex: previousIndex,
          item: items[currentIndex],
          reason: &quot;snap&quot;
        &#125;)
        slides = carouselRoot.querySelectorAll(&quot;.wire-next__carousel-thumbnails button&quot;)
        slide = slides[currentIndex]
        if (slide) &#123;
          viewport = slide.parentElement
          viewport.scrollTo(&#123;
            left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
            top: slide.offsetTop - (viewport.clientHeight - slide.clientHeight) / 2,
            behavior: &quot;smooth&quot;
          &#125;)
        &#125;
      &#125;
    &#125;

    function selectSlide(index, reason, sourceEvent, previousIndex) &#123;
      if (slideCount() === 0) &#123;
        return
      &#125;
      previousIndex = currentIndex
      currentIndex = normalizedIndex(Number(index))
      syncNavigation(sourceEvent, currentIndex)
      if (previousIndex === currentIndex &amp;&amp; reason !== &quot;initialize&quot;) &#123;
        return
      &#125;
      $emit(&quot;change&quot;, &#123;
        index: currentIndex,
        previousIndex: previousIndex,
        item: items[currentIndex],
        reason: reason || &quot;select&quot;
      &#125;)
      if (currentIndex === 0) &#123;
        $emit(&quot;reachStart&quot;, &#123; index: currentIndex &#125;)
      &#125;
      if (currentIndex === maximumIndex()) &#123;
        $emit(&quot;reachEnd&quot;, &#123; index: currentIndex &#125;)
      &#125;
    &#125;

    function previousSlide(sourceEvent, previousIndex) &#123;
      previousIndex = currentIndex
      selectSlide(currentIndex - 1, &quot;previous&quot;, sourceEvent)
      $emit(&quot;previous&quot;, &#123;
        index: currentIndex,
        previousIndex: previousIndex,
        item: items[currentIndex]
      &#125;)
    &#125;

    function nextSlide(sourceEvent, previousIndex) &#123;
      previousIndex = currentIndex
      selectSlide(currentIndex + 1, &quot;next&quot;, sourceEvent)
      $emit(&quot;next&quot;, &#123;
        index: currentIndex,
        previousIndex: previousIndex,
        item: items[currentIndex]
      &#125;)
    &#125;

    function handleKeydown(sourceEvent) &#123;
      if (sourceEvent.key === &quot;ArrowLeft&quot;) &#123;
        sourceEvent.preventDefault()
        if (isRTL) &#123;
          nextSlide(sourceEvent)
        &#125; else &#123;
          previousSlide(sourceEvent)
        &#125;
      &#125;
      if (sourceEvent.key === &quot;ArrowRight&quot;) &#123;
        sourceEvent.preventDefault()
        if (isRTL) &#123;
          previousSlide(sourceEvent)
        &#125; else &#123;
          nextSlide(sourceEvent)
        &#125;
      &#125;
      if (sourceEvent.key === &quot;Home&quot;) &#123;
        sourceEvent.preventDefault()
        selectSlide(0, &quot;keyboard&quot;, sourceEvent)
      &#125;
      if (sourceEvent.key === &quot;End&quot;) &#123;
        sourceEvent.preventDefault()
        selectSlide(maximumIndex(), &quot;keyboard&quot;, sourceEvent)
      &#125;
    &#125;

    function beginDrag(sourceEvent) &#123;
      if (!isDraggable || isSnap) &#123;
        return
      &#125;
      sourceEvent.preventDefault()
      dragOrigin = sourceEvent.clientX
      dragOffset = 0
      sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId)
      $emit(&quot;dragStart&quot;, &#123; index: currentIndex, x: dragOrigin &#125;)
    &#125;

    function moveDrag(sourceEvent) &#123;
      if (!isDraggable || isSnap || dragOrigin === null) &#123;
        return
      &#125;
      sourceEvent.preventDefault()
      dragOffset = sourceEvent.clientX - dragOrigin
    &#125;

    function cancelDrag() &#123;
      dragOrigin = null
      dragOffset = 0
    &#125;

    function endDrag(sourceEvent, distance) &#123;
      if (!isDraggable || isSnap || dragOrigin === null) &#123;
        return
      &#125;
      sourceEvent.preventDefault()
      distance = dragOffset || sourceEvent.clientX - dragOrigin
      dragOrigin = null
      dragOffset = 0
      if (Math.abs(distance) &gt; 20) &#123;
        if ((distance &lt; 0 &amp;&amp; !isRTL) || (distance &gt; 0 &amp;&amp; isRTL)) &#123;
          nextSlide(sourceEvent)
        &#125; else &#123;
          previousSlide(sourceEvent)
        &#125;
      &#125;
      $emit(&quot;dragEnd&quot;, &#123;
        index: currentIndex,
        distance: distance
      &#125;)
    &#125;

    function advanceAutoplay() &#123;
      if (currentIndex &gt;= maximumIndex()) &#123;
        selectSlide(0, &quot;autoplay&quot;)
      &#125; else &#123;
        selectSlide(currentIndex + 1, &quot;autoplay&quot;)
      &#125;
    &#125;

    function startAutoplay() &#123;
      if (!isAutoPlay || playing || slideCount() &lt; 2) &#123;
        return
      &#125;
      playing = true
      autoplayTimer = setInterval(advanceAutoplay, Math.max(1000, Number(autoplayInterval)))
      $emit(&quot;play&quot;, &#123; index: currentIndex, interval: autoplayInterval &#125;)
    &#125;

    function pauseAutoplay() &#123;
      if (autoplayTimer) &#123;
        clearInterval(autoplayTimer)
      &#125;
      autoplayTimer = null
      if (playing) &#123;
        $emit(&quot;pause&quot;, &#123; index: currentIndex &#125;)
      &#125;
      playing = false
    &#125;

  &#125;

  lifecycle &#123;
    mount &#123;
      $emit(&quot;initialize&quot;, &#123; index: currentIndex, count: slideCount() &#125;)
      startAutoplay()
    &#125;
    unmount &#123;
      if (autoplayTimer) &#123;
        clearInterval(autoplayTimer)
      &#125;
    &#125;
  &#125;

  view &#123;
        &lt;section
      &#123;...attrs&#125;
      class=&quot;wire-next wire-next--carousel wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;
      data-rtl=&quot;&#123;isRTL&#125;&quot;
      data-centered=&quot;&#123;isCentered&#125;&quot;
      data-draggable=&quot;&#123;isDraggable &amp;&amp; !isSnap&#125;&quot;
      data-dragging=&quot;&#123;dragOrigin !== null&#125;&quot;
      data-auto-height=&quot;&#123;isAutoHeight&#125;&quot;
      data-snap=&quot;&#123;isSnap&#125;&quot;
      data-thumbnails=&quot;&#123;thumbnails&#125;&quot;
      dir=&quot;&#123;isRTL ? 'rtl' : 'ltr'&#125;&quot;
      role=&quot;region&quot;
      aria-roledescription=&quot;carousel&quot;
      aria-label=&quot;&#123;ariaLabel&#125;&quot;
      @keydown=&quot;handleKeydown(event)&quot;
      @mouseenter=&quot;rememberRoot(event); pauseAutoplay()&quot;
      @mouseleave=&quot;startAutoplay()&quot;
      @focusin=&quot;rememberRoot(event); pauseAutoplay()&quot;
      @focusout=&quot;startAutoplay()&quot;
    &gt;
      &#123;#if title || description&#125;
        &lt;header class=&quot;wire-next__carousel-header&quot;&gt;
          &#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
          &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
        &lt;/header&gt;
      &#123;/if&#125;

        &lt;div class=&quot;wire-next__carousel-layout&quot;&gt;
          &#123;#if thumbnails === &quot;vertical&quot;&#125;
            &lt;div class=&quot;wire-next__carousel-thumbnails&quot; aria-label=&quot;Choose a slide&quot;&gt;
              &#123;#each items as item, index&#125;
                &lt;button
                  type=&quot;button&quot;
                  data-active=&quot;&#123;index === currentIndex&#125;&quot;
                  aria-label=&quot;Show slide &#123;index + 1&#125;: &#123;item.label || item.title&#125;&quot;
                  aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
                  @click=&quot;selectSlide(index, 'thumbnail', event)&quot;
                &gt;
                  &#123;#if item.thumbnail&#125;&lt;img src=&quot;&#123;item.thumbnail&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
                  &lt;span&gt;&#123;item.label || item.title || &quot;Slide &quot; + (index + 1)&#125;&lt;/span&gt;
        &lt;/button&gt;
              &#123;/each&#125;
            &lt;/div&gt;
          &#123;/if&#125;

          &lt;div class=&quot;wire-next__carousel-main&quot;&gt;
        &lt;div class=&quot;wire-next__carousel-stage&quot;&gt;
        &lt;div
                class=&quot;wire-next__carousel-viewport&quot;
                tabindex=&quot;0&quot;
                @scroll=&quot;handleSnapScroll(event)&quot;
                @pointerdown=&quot;beginDrag(event)&quot;
                @pointermove=&quot;moveDrag(event)&quot;
                @pointerup=&quot;endDrag(event)&quot;
                @pointercancel=&quot;cancelDrag()&quot;
                @lostpointercapture=&quot;cancelDrag()&quot;
              &gt;
        &lt;div
                  class=&quot;wire-next__carousel-track&quot;
                  style=&quot;--wire-carousel-index: &#123;currentIndex&#125;; --wire-carousel-per-view: &#123;slidesPerView&#125;; --wire-carousel-gap: &#123;gap&#125;; --wire-carousel-drag-offset: &#123;dragOffset&#125;px&quot;
                &gt;
                  &#123;#each items as item, index&#125;
                    &lt;article
                      class=&quot;wire-next__carousel-slide&quot;
                      data-active=&quot;&#123;index === currentIndex&#125;&quot;
                      role=&quot;group&quot;
                      aria-roledescription=&quot;slide&quot;
                      aria-label=&quot;&#123;index + 1&#125; of &#123;items.length&#125;&quot;
                      aria-hidden=&quot;&#123;index === currentIndex ? 'false' : 'true'&#125;&quot;
                    &gt;
                      &#123;#if item.imageSrc&#125;
                        &lt;img src=&quot;&#123;item.imageSrc&#125;&quot; alt=&quot;&#123;item.imageAlt || item.title || ''&#125;&quot; /&gt;
                      &#123;/if&#125;
                      &lt;div class=&quot;wire-next__carousel-slide-content&quot;&gt;
                        &#123;#if item.eyebrow&#125;&lt;span&gt;&#123;item.eyebrow&#125;&lt;/span&gt;&#123;/if&#125;
                        &#123;#if item.title || item.label&#125;&lt;h4&gt;&#123;item.title || item.label&#125;&lt;/h4&gt;&#123;/if&#125;
                        &#123;#if item.description&#125;&lt;p&gt;&#123;item.description&#125;&lt;/p&gt;&#123;/if&#125;
                        &#123;#if item.actionLabel&#125;
                          &lt;a href=&quot;&#123;item.actionHref || '#'&#125;&quot;&gt;&#123;item.actionLabel&#125;&lt;/a&gt;
                        &#123;/if&#125;
                      &lt;/div&gt;
        &lt;/article&gt;
                  &#123;/each&#125;
                  &lt;slot /&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;button
                class=&quot;wire-next__carousel-control wire-next__carousel-control--previous&quot;
                type=&quot;button&quot;
                aria-label=&quot;Previous slide&quot;
                disabled=&quot;&#123;!isInfiniteLoop &amp;&amp; currentIndex === 0&#125;&quot;
                @click=&quot;previousSlide(event)&quot;
              &gt;
        &lt;span class=&quot;icon-[lucide--chevron-left]&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;/span&gt;
        &lt;/button&gt;
        &lt;button
                class=&quot;wire-next__carousel-control wire-next__carousel-control--next&quot;
                type=&quot;button&quot;
                aria-label=&quot;Next slide&quot;
                disabled=&quot;&#123;!isInfiniteLoop &amp;&amp; currentIndex === maximumIndex()&#125;&quot;
                @click=&quot;nextSlide(event)&quot;
              &gt;
        &lt;span class=&quot;icon-[lucide--chevron-right]&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;/span&gt;
        &lt;/button&gt;

              &#123;#if showCounter&#125;
                &lt;output class=&quot;wire-next__carousel-counter&quot; aria-live=&quot;polite&quot;&gt;
                  &#123;currentIndex + 1&#125; / &#123;items.length&#125;
                &lt;/output&gt;
              &#123;/if&#125;
            &lt;/div&gt;

            &#123;#if showPagination&#125;
              &lt;div class=&quot;wire-next__carousel-pagination&quot; aria-label=&quot;Choose a slide&quot;&gt;
                &#123;#each items as item, index&#125;
                  &lt;button
                    type=&quot;button&quot;
                    data-active=&quot;&#123;index === currentIndex&#125;&quot;
                    aria-label=&quot;Show slide &#123;index + 1&#125;&quot;
                    aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
                    @click=&quot;selectSlide(index, 'pagination', event)&quot;
                  &gt;
        &lt;/button&gt;
                &#123;/each&#125;
              &lt;/div&gt;
            &#123;/if&#125;

            &#123;#if thumbnails === &quot;horizontal&quot;&#125;
              &lt;div class=&quot;wire-next__carousel-thumbnails&quot; aria-label=&quot;Choose a slide&quot;&gt;
                &#123;#each items as item, index&#125;
                  &lt;button
                    type=&quot;button&quot;
                    data-active=&quot;&#123;index === currentIndex&#125;&quot;
                    aria-label=&quot;Show slide &#123;index + 1&#125;: &#123;item.label || item.title&#125;&quot;
                    aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
                    @click=&quot;selectSlide(index, 'thumbnail', event)&quot;
                  &gt;
                    &#123;#if item.thumbnail&#125;&lt;img src=&quot;&#123;item.thumbnail&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
                    &lt;span&gt;&#123;item.label || item.title || &quot;Slide &quot; + (index + 1)&#125;&lt;/span&gt;
        &lt;/button&gt;
                &#123;/each&#125;
              &lt;/div&gt;
            &#123;/if&#125;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/section&gt;
    &#125;
&#125;
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
      <BackToTop />
    </div>
  }
}