Partial Component

Slider Pagination

The Slider Pagination partial creates navigation controls for sliders and carousels. It can display as numbered buttons or as named tabs, with proper accessibility support and active state management. The numbered buttons are rendered under the slider, while tabs are rendered above to keep with common usage patterns.

Manifest

{
  "name": "slider-pagination",
  "type": "_partials",
  "styles": ["slider-pagination.css"],
  "scripts": [],
  "requires": []
}

Configuration

isTabs: true
slides:
  - text:
      title: 'First Slide'
  - text:
      title: 'Second Slide'
  - text:
      title: 'Third Slide'

Configuration Options

PropertyTypeRequiredDescription
slidesarrayYesArray of slide objects
isTabsbooleanNoDisplay as tabs (true) or numbers (false)

Example

For a real live example please visit the simple slider page.

Usage in Templates

{% from "components/_partials/slider-pagination/slider-pagination.njk" import sliderPagination %}

{{ sliderPagination(section.slides, section.isTabs) }}

Notes

  • Numbered buttons or named tabs
  • ARIA labels and disabled state management
  • First slide is active by default