# Content Slider

Table of Contents

###### Examples

Basic Usage
Keyboard Controls
Global Controls
Controls
Loop

###### JavaScript Reference

Constructor
Requirements
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

- LazyComponent Class
- elements.js Util

### 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.