Content Slider

Description

The ContentSlider component provides a way to display multiple content slides with navigation controls. Users can navigate through slides using previous/next buttons, keyboard arrows, or programmatically. It extends the ShadowComponent class and supports looping, keyboard controls, and customizable navigation.

Basic Usage

<k-content-slider
  class="bg-alt"
  style="height: 10rem"
>
  <div><p>Slide 1</p></div>
  <div><p>Slide 2</p></div>
  <div><p>Slide 3</p></div>
  <div><p>Slide 4</p></div>
</k-content-slider>

Keyboard Controls

By default the keyboard-controls attribute is set to "true", which allows the left and right keyboard buttons to change the slides when the component is focused. Set it to "false" to disable this functionality.

<k-content-slider
  class="bg-alt"
  style="height: 10rem"
  keyboard-controls="false"
>
  <div><p>Slide 1</p></div>
  <div><p>Slide 2</p></div>
  <div><p>Slide 3</p></div>
  <div><p>Slide 4</p></div>
</k-content-slider>

Global Controls

Use the global-controls="true" attribute to enable global controls (next and back arrows) anywhere in the window, even when this component is not focused. This is suggested when there is only one content slider on a page and it is of prominance (large slider on top of the page).

<k-content-slider
  class="bg-alt"
  style="height: 10rem"
  global-controls="true"
>
  <div><p>Slide 1</p></div>
  <div><p>Slide 2</p></div>
  <div><p>Slide 3</p></div>
  <div><p>Slide 4</p></div>
</k-content-slider>

Controls

By default the controls attribute is set to "true", this shows the previous and next buttons. To hide them set controls="false".

<k-content-slider
  class="bg-alt"
  style="height: 10rem"
  controls="false"
>
  <div><p>Slide 1</p></div>
  <div><p>Slide 2</p></div>
  <div><p>Slide 3</p></div>
  <div><p>Slide 4</p></div>
</k-content-slider>

Loop

To make the slider loop (go back to the beginning after it hits the last slide) use the loop="true" attribute.

<k-content-slider
  class="bg-alt"
  style="height: 10rem"
  loop="true"
>
  <div><p>Slide 1</p></div>
  <div><p>Slide 2</p></div>
  <div><p>Slide 3</p></div>
  <div><p>Slide 4</p></div>
</k-content-slider>

JavaScript Reference

Constructor

Extends ShadowComponent

new ContentSlider()

Requirements

• ShadowComponent
• Icon

Properties

index: number

Gets or sets the current slide index. Automatically validates to stay within bounds. Syncs to index attribute. Default value is 0.

controls: boolean

Gets or sets whether control buttons are visible. Syncs to controls attribute. Default value is true.

keyboardControls: boolean

Gets or sets whether keyboard controls are enabled. Syncs to keyboard-controls attribute. Default value is true.

globalControls: boolean

Gets or sets whether global keyboard controls are enabled. Use with caution - recommended only for prominent sliders. Syncs to global-controls attribute. Default value is false.

loop: boolean

Gets or sets whether the slider loops continuously (after the last slide, go to the first; before the first slide, go to the last). Syncs to loop attribute. Default value is false.

content: Array<HTMLElement>

Array of child elements that serve as slides. Automatically updated when the component is connected.

Methods

previous(): void

Navigates to the previous slide. If loop is enabled and currently on the first slide, goes to the last slide. Dispatches a previous event.

next(): void

Navigates to the next slide. If loop is enabled and currently on the last slide, goes to the first slide. Dispatches a next event.

goto(index): void

Navigates to the slide at the specified index. Index is automatically validated to stay within bounds. Dispatches a goto event.

• index number - The zero-based index of the slide to navigate to

Events

change

Fired when the active slide changes. The event detail contains { index }.

previous

Fired when the previous button is clicked or previous navigation is triggered. The event detail contains { index } of the target slide.

next

Fired when the next button is clicked or next navigation is triggered. The event detail contains { index } of the target slide.

goto

Fired when programmatic navigation to a specific slide occurs. The event detail contains { index } of the target slide.

keyleft

Fired when the left arrow key is pressed (before triggering previous navigation).

keyright

Fired when the right arrow key is pressed (before triggering next navigation).

Slots

Default Slot

The main content area where slide elements are placed. Each direct child element becomes a slide.

prev

Custom content for the previous button. Defaults to a left chevron icon if not provided.

next

Custom content for the next button. Defaults to a right chevron icon if not provided.