Cuttlefish Docs
  • English

    • spz-slide-indicator

    When to use

    spz-slide-indicator provides a dot-style navigation indicator for spz-carousel. It automatically syncs with the carousel's current slide and supports click-to-navigate.

    Supported layout

    • container

    Example

    <spz-carousel id="my-carousel" layout="responsive" width="4" height="3">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</spz-carousel>

<spz-slide-indicator
  layout="container"
  carousel-id="my-carousel"
  size="5">
</spz-slide-indicator>

    Attributes

    AttributeDescriptionTypeRequired
    carousel-idID of the carousel element to trackstringYes
    sizeMaximum number of visible dots. When the slide count exceeds this, the indicator uses a scrolling viewportnumberNo
    typeIndicator type. Supports media query syntax for responsive switchingstringNo

    Status attributes

    AttributeDescription
    emptySet when the carousel has no slides (size is 0)

    CSS classes

    ClassDescription
    i-spzhtml-slide-indicator__dotBase class for each dot element
    i-spzhtml-slide-indicator__dot--activeApplied to the currently active dot
    i-spzhtml-slide-indicator__dot--largeApplied to large-size dots

    Behavior

    1. On build, the component reads the carousel's slide count via getData().
    2. Dot elements are dynamically created based on the slide count.
    3. Clicking a dot navigates the carousel to the corresponding slide via goToSlide().
    4. The carousel calls changeActive(current) on the indicator when the active slide changes.
    5. When the number of slides exceeds size, the visible dots window scrolls smoothly to keep the active dot in view.

    Notes

    • This component does not expose custom actions.
    • This component does not emit custom events.
    • The indicator type can be switched responsively via media query in the type attribute.