<pg-slider>

Wrap a collecton of elements in this wrapper element and it will automatically provide a functional, accessible slider.

Features

Progressively enhances markup consisting of only the slides.
Enforces definition of an accessible name for the slider.
Previous/next buttons are fully extendable/customizable.
Gracefully (but noticeably) degrades if the provided custom play/pause, previous, and/or next buttons fail to load.
Label for the controls wrapper element is translatable.
Optional progress bar displays scroll progress.

Usage

Conditionally load the JavaScript only if the <pg-slider> is present on the page at load:

if (document.querySelectorAll('pg-slider').length) import('./slider.min.js');

Load the script as a module in WordPress:

wp_enqueue_script_module( 'pg-slider', get_theme_file_uri( 'js/pg-slider.min.js' ), [], filemtime( get_theme_file_path( 'js/pg-slider.min.js' ) ) );

Content

Required content: Flow content.
Note that all direct children elements will be turned into slides - any non-slide additions to this wrapper element should be done after the custom element is defined.

Attributes

Name	Description	Default
`aria-labelledby`	Required. ID reference for an element containing the accessible name for region containing the slider (e.g. a heading element).	undefined
`data-controlslabel`	Label for the controls wrapper element (for translation purposes).	`Slider controls`
`data-nextbtn`	ID reference for a `<template>` element containing the markup for the next button. See below.	undefined
`data-prevbtn`	ID reference for a `<template>` element containing the markup for the previous button. See below.	undefined
`data-progress`	When present, outputs a native `meter` element to to show scroll progress.	undefined

Properties

No public properties are exposed by this component.

Events

No custom events are dispatched by this component.

Templates

Previous Button

If defined, the component can make use of a templated <button> to override the included, barebones previous button. The defined template should be a <button> element with a class of prevbtn.

Be sure to give this button an accessible name.

<template id="prevbtn">
	<button type="button" class="prevbtn">
		<svg width="44" height="44" aria-hidden="true">
			<path fill="none" stroke="currentcolor" d="m21.22 29-7.021-7 7.021-7M14 22h16"/>
		</svg>
		<span class="screen-reader-text">Previous slide</span>
	</button>
</template>

Next Button

If defined, the component can make use of a templated <button> to override the included, barebones next button. The defined template should be a <button> element with a class of nextbtn.

Be sure to give this button an accessible name.

<template id="nextbtn">
	<button type="button" class="nextbtn">
		<svg width="44" height="44" aria-hidden="true">
			<path fill="none" stroke="currentcolor" d="m22.78 15 7.021 7-7.021 7M30 22H14"/>
		</svg>
		<span class="screen-reader-text">Next slide</span>
	</button>
</template>

Style

No additional CSS is required beyond that called for by the overall page design, though it will likely be beneficial to set flex-shrink: 0 on children of the .slide-wrap element.

Examples

Default Appearance (Image Slider)

Utilizes default, unstyled previous/next buttons.

Custom Previous/Next Buttons (Image Slider)

Utilizes the previous/next buttons defined within a <template> element whose [id] is passed via the [data-prevbtn] and [data-nextbtn] attributes on the component.

Custom Controls Wrapper Label

Utilizes a translated string for the controls wrapper element, defined by the data-controlslabel attribute on the component. (Note that this string is used within the controls wrapper element's aria-label attribute.)

Progress Bar (Image Slider)

Add a progress bar by adding the [data-progress] attribute. (You will need to provide your own reset for the <meter> element itself.)

Smooth Updates (Image Slider)

Demonstrates smooth scroll with additional CSS rules applied.

The following sample styles are applied to the component above. (You will need to provide your own reset for the <button> elements themselves.)

pg-slider:defined .slide-wrap {scroll-behavior: smooth;}

Fewer Elements (Image Slider)

Demonstrates controls being hidden when the slider is smaller than its container width.

Tests

Empty Component

The required child elements are not present.

Result: a console error is thrown.

Inaccessible Component

The required [aria-labelledby] attribute is not set to define an accessible name for the component.

Result: a console error is thrown.

Improper Prevous Button Template

The referenced previous button template does not contain a <button> element with a class of prevbtn.

Note that the component has a aria-labelledby attribute set to the id attribute of the above <h2> and <summary> elements.

Result: silently falls back to the default previous button template.

Improper Next Button Template

The referenced next button template does not contain a <button> element with a class of nextbtn.

Note that the component has a aria-labelledby attribute set to the id attribute of the above <h2> and <summary> elements.

Result: silently falls back to the default next button template.

Back