↔️
Content Slider
A flexible container that shows content in a slideshow format. Only accepts
slotted <section> elements. The content and styling of
the section is left up to the user except for a default rule (which can be overridden)
that will center align the content both horizontally and vertically.
Square Example
SECTION C
Just testing...
Sections can be dynamically added or removed.
The navigation controlls will update accordingly.
Advanced Example
The built in navigation widgets can be turned off by setting the boolean
controls attribute to false.
This is useful if you want to control the slider actions externally via javascript.
The following info will help you build your own custom controls.
The .sections property is an array containing all sections.
The .active property will contain a reference to the currently active section.
The .index property always contains the array index of the currently active section.
The .count property is a quick reference to the number of sections.
The .lastIndex property is the index of the last section.
The .next() and .prev() methods will traverse forwards or backwards through the sections.
The .show(index) method will traverse directly to the specified index.
A traverse event is dispatched whenever the active section changes.
Full Page Example