logo EXAMPLE WEBSITE

Widgets

↔️ 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 A

SECTION B

SECTION C

Just testing...

Sections can be dynamically added or removed.
The navigation controlls will update accordingly.


Advanced Example

SECTION A

SECTION B

SECTION C

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

SECTION A

SECTION B

SECTION C