Content Slider

Table of Contents

Description

description

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>

Slide 1

Slide 2

Slide 3

Slide 4

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>

Slide 1

Slide 2

Slide 3

Slide 4

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>

Slide 1

Slide 2

Slide 3

Slide 4

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>

Slide 1

Slide 2

Slide 3

Slide 4

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>

Slide 1

Slide 2

Slide 3

Slide 4

JavaScript Refrerence

Constructor

Extends LazyComponent
new ContentSlider()
new ContentSlider(<Array>HTMLElement content)
new ContentSlider(<Array>HTMLElement content, Object init_attrs)

Paramters

content: <Array>HTMLElement>

An array of HTMLElements that will be the contents of this slider.

init_attrs: Object

An options object that may contain the initial values of the attributes (see attributes below).

Requirements

Attributes

index: number

The index of the currently active slide (base 0). The default value is 0.

controls: boolean

A boolean that indicates if the control buttons should be shown. The default value is true.

keyboardControls: boolean

A boolean that indicates if the left and right arrows should be used to control the slider. The default value is true.

globalControls: boolean

A boolean that indicates if the left and right arrows should be used to control the slider even when it is not focused (the listener is on the window). The default value is false.

loop: boolean

A boolean that indicates index should loop. When true, after the last side it will go back to the first, and when on the first slide the previous slide will be the last. The default value is false.

Methods

previous(): undefined

Goes to the previous slide.

next(): undefined

Goes to the next slide.

goto(number index): undefined

Goes to the specified slide. If the index is more than the number of slides the last side will be shown. If the index is below 0, the first slide will be shown.