Table of Contents
Examples
Basic UsageKeyboard Controls
Global Controls
Controls
Loop
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
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.