On this page Slide Group Slide Group

The m3e-slide-group component presents directional pagination controls for navigating overflowing content.

Installation 
npm i @m3e/slide-group
 Usage

This section outlines usage examples and configuration guidance for the components in this package.

Basic usage

To use the m3e-slide-group, simply nest content inside it. When content overflows, directional pagination buttons will appear allowing the user to click to scroll its content.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
 
<m3e-slide-group>
  <div>Item 1</div>
  <!-- Additional items omitted for brevity -->
</m3e-slide-group>
 Orientation

By default, scroll groups are oriented horizontally. Use the vertical attribute to create a vertically oriented scroll group.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
 
<m3e-slide-group vertical>
  <div>Item 1</div>
  <!-- Additional items omitted for brevity -->
</m3e-slide-group>
 Accessibility

Scroll groups are not given an ARIA role, indicating that they are treated as neutral, non-semantic elements in the accessibility tree unless explicitly referenced or annotated.

Pagination buttons are intentionally excluded from the tab order and strong focus indicators are not supported. This reduces focus noise and streamlines keyboard navigation.

Use the previous-page-label and next-page-label attributes to provide accessible labels to pagination buttons.

Native module support

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following. 

<script type="module" src="/node_modules/@m3e/slide-group/dist/index.js"></script>

You also need a module script for @m3e/icon-button due to being a dependency.

<script type="module" src="/node_modules/@m3e/icon-button/dist/index.js"></script>

In addition, you must use an import map to include additional dependencies. 

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js"
    }
  }
</script>

For production, use index.min.js and a11y.min.js for faster load times.

API

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.