Keen Slider

https://keen-slider.io/docs
Admin
Keen Slider is a lightweight, dependency-free JavaScript carousel/slider library for web and React...
Tokens:8,721
Snippets:109
Trust Score:7.5
Update:3 months ago
Show doc for...
Tokens:
Raw
### Animator Start

Source: https://keen-slider.io/docs

Starts a new animation with a sequence of keyframes. Each keyframe defines a step in the animation, including distance, duration, and easing.

```APIDOC
## animator.start()

### Description
Starts a new animation. Needs an array of keyframes. The keyframes are processed sequentially.

### Method
`animator.start(keyframes: Array<Keyframe>)

### Parameters
#### Keyframes
- **keyframes** (Array<Keyframe>) - Required - An array of keyframe objects that define the animation sequence.

### Keyframe Object
- **distance** (number) - Required - Distance moved in the animation.
- **duration** (number) - Required - Duration of the animation in milliseconds.
- **earlyExit** (number) - Optional - Optionally sets an earlier termination of the keyframe.
- **easing** (function) - Optional - Easing of the animation as (`time`: number) => number.

### Request Example
```javascript
slider.animator.start([
  { distance: 100, duration: 500 },
  { distance: -50, duration: 300, easing: t => t * t }
])
```
```

--------------------------------

### animator.start

Source: https://keen-slider.io/docs/react-native

Starts a new animation with a sequence of keyframes. Each keyframe defines a step in the animation.

```APIDOC
## animator.start

### Description
Starts a new animation. Needs an array of keyframes. The keyframes are processed sequentially.

### Method
`animator.start(keyframes: object[])`

### Parameters
#### Keyframes
An array of keyframe objects, where each object has the following properties:
- **distance** (number) - Distance moved in the animation.
- **duration** (number) - Duration of the animation in milliseconds.
- **earlyExit** (number) - Optionally sets an earlier termination of the keyframe.
- **easing** (function) - Easing of the animation as (`time`: number) => number.

### Request Example
```javascript
slider.animator.start([
  { distance: 100, duration: 500 },
  { distance: -50, duration: 300, easing: t => t } 
])
```
```

--------------------------------

### Install Keen Slider for React Native

Source: https://keen-slider.io/docs/react-native

Install the keen-slider package using npm. This command adds the library to your project dependencies.

```bash
npm install keen-slider

```

--------------------------------

### Create a Basic Keen-Slider Plugin

Source: https://keen-slider.io/docs

This example shows how to create a simple plugin that alerts 'Hello World' when the slider is created. Plugins are initiated during slider startup and can interact with the slider instance.

```javascript
var slider = new KeenSlider(
  '#my-slider',
  {
    loop: true,
  },
  [
    slider => {
      slider.on('created', () => {
        alert('Hello World')
      })
    },
  ]
)
```

--------------------------------

### Start Keen Slider Animation

Source: https://keen-slider.io/docs/react-native

Use the animator.start() method to initiate a new animation sequence. It accepts an array of keyframes, each defining a step in the animation.

```javascript
slider.animator.start([keyframe1, keyframe2])
```

--------------------------------

### Use Keen-Slider in Vue 3 Composition API

Source: https://keen-slider.io/docs

Utilize the `useKeenSlider` function within Vue 3's setup function to integrate Keen-Slider. It returns refs for the container and the slider instance.

```javascript
<script>
  import { ref } from 'vue'
  import { useKeenSlider } from 'keen-slider/vue' // import from 'keen-slider/vue.es' to get an ES module

  export default {
    setup() {
      const [container, slider] = useKeenSlider({ loop: true }, [
        // add plugins here
      ])
      return { container }
    },
  }
</script>

<template>
  <div ref="container" class="keen-slider">
    <div class="keen-slider__slide number-slide1">1</div>
    <div class="keen-slider__slide number-slide2">2</div>
    <div class="keen-slider__slide number-slide3">3</div>
    <div class="keen-slider__slide number-slide4">4</div>
    <div class="keen-slider__slide number-slide5">5</div>
    <div class="keen-slider__slide number-slide6">6</div>
  </div>
</template>

<style>
  @import url('keen-slider/keen-slider.css');
</style>

```

--------------------------------

### Transform Distance to Index with Keen Slider Track

Source: https://keen-slider.io/docs

Use `distToIdx` to find the slide index corresponding to a given distance from the start of the track.

```javascript
slider.track.distToIdx
```

--------------------------------

### selector

Source: https://keen-slider.io/docs

Specifies how the slides from the DOM are received. This could be a css selector string, an array of HTMLElement or a function that gets the container and returns an array of HTMLElement, a NodeList, a HTMLCollection, a string or null.

```APIDOC
## selector: string | HTMLElement[] | NodeList | function | null

### Description
Specifies how the slides from the DOM are received. This could be a **css selector string** , an **array of HTMLElement** or a **function** that gets the container and returns an **array** of **HTMLElement** , a **NodeList** , a **HTMLCollection** , a **string** or **null**. If you don't want the slider to position or scale the slides, set this option to **null**. Default is **'.keen-slider__slide'**.
```

--------------------------------

### Create a Custom Plugin for Keen Slider in React Native

Source: https://keen-slider.io/docs/react-native

Define custom slider functionalities as plugins. Plugins are functions that receive the slider instance and can hook into the slider's lifecycle events using `on` and `emit`. This example shows a plugin that triggers an alert when the slider is created.

```javascript
const slider = useKeenSliderNative(
  {
    slides: 4,
  },
  [
    slider => {
      slider.on('created', () => {
        alert('Hello World')
      })
    },
  ]
)

```

--------------------------------

### Get Distance to Index with Keen Slider Track

Source: https://keen-slider.io/docs

Use `idxToDist` to calculate the distance to a specific slide index. Optional arguments allow specifying if the index is absolute and a reference position.

```javascript
slider.track.idxToDist
```

--------------------------------

### Get Track Velocity in Keen Slider

Source: https://keen-slider.io/docs

The `velocity` function returns the current speed of the track, measured in viewport units per millisecond.

```javascript
slider.track.velocity
```

--------------------------------

### Initialize Keen-Slider with Options

Source: https://keen-slider.io/docs

Initialize KeenSlider by providing a container selector, options object, and an optional plugins array. The 'created' event hook is demonstrated.

```javascript
var slider = new KeenSlider(
  '#my-slider',
  {
    loop: true,
    created: () => {
      console.log('created')
    },
  },
  [
    // add plugins here
  ]
)

```

--------------------------------

### Configure Breakpoints for Keen Slider

Source: https://keen-slider.io/docs

Use the `breakpoints` option to apply different configurations based on media queries. The last matching media query will be applied if multiple match.

```javascript
new KeenSlider('#my-slider', {
  loop: true,
  breakpoints: {
    '(min-width: 500px)': {
      loop: false,
    },
  },
})
```

--------------------------------

### initial

Source: https://keen-slider.io/docs

Sets the index of the initially visible slide.

```APIDOC
## initial: number

### Description
Sets the index of the initially visible slide. Default is **1**.
```

--------------------------------

### options

Source: https://keen-slider.io/docs

The currently used Options and Event hooks with regard to the active breakpoint.

```APIDOC
## options

### Description
The currently used `Options` and `Event hooks` with regard to the active breakpoint.
```

--------------------------------

### prev

Source: https://keen-slider.io/docs/react-native

Navigates the slider to the previous slide if one exists.

```APIDOC
## prev

### Description
Changes the currently active slide to the previous one when called. If exists.

### Method
`slider.prev()`
```

--------------------------------

### Reinitialize Track in Keen Slider

Source: https://keen-slider.io/docs

Call `init` to reinitialize the slider's track. An optional active index can be provided.

```javascript
slider.track.init
```

--------------------------------

### size

Source: https://keen-slider.io/docs

The size of the container/viewport, width or height, depending on the vertical option.

```APIDOC
## size

### Description
The size of the container/viewport, width or height, depending on the vertical option.
```

--------------------------------

### on

Source: https://keen-slider.io/docs

Registers an event hook when called.

```APIDOC
## on

### Description
Registers an event hook when called.

### Parameters
#### Path Parameters
- **eventName** (string) - Required - Specifies the event name.
- **callback** (function) - Required - The function that will be called on this event.
- **remove** (boolean) - Optional - Whether the function should be set or removed. Default is `false`.
```

--------------------------------

### Plugins

Source: https://keen-slider.io/docs/react-native

Plugins allow for custom slider functions to be created, integrated, and versioned easily. Keen-Slider itself is partially based on plugins. A plugin is a function that receives the slider instance as its only argument and is initiated during slider startup.

```APIDOC
## Plugins

### Description
To make it easier to integrate, structure, and version custom slider functions, you can create plugins. Keen-Slider itself is also partially based on plugins. A plugin is basically a function that receives the slider instance as its only argument and is initiated during slider startup. With the `on` and `emit` function it can take part in the slider lifecycle.

### Example
```javascript
const slider = useKeenSliderNative(
  {
    slides: 4,
  },
  [
    slider => {
      slider.on('created', () => {
        alert('Hello World')
      })
    },
  ]
)
```
```

--------------------------------

### Navigate to the Previous Slide with Keen Slider

Source: https://keen-slider.io/docs

Call the `prev` function to go back to the previous slide if one exists.

```javascript
slider.prev()
```

--------------------------------

### mode

Source: https://keen-slider.io/docs

Sets the animation that is applied after a drag ends.

```APIDOC
## mode: 'snap' | 'free' | 'free-snap'

### Description
Sets the animation that is applied after a drag ends. Default is **'snap'**.
```

--------------------------------

### next

Source: https://keen-slider.io/docs/react-native

Advances the slider to the next slide if one exists.

```APIDOC
## next

### Description
Changes the currently active slide to the next one when called. If exists.

### Method
`slider.next()`
```

--------------------------------

### Import Keen-Slider in JavaScript/TypeScript

Source: https://keen-slider.io/docs

Import the necessary CSS and the KeenSlider class into your JavaScript or TypeScript project. This prepares the library for use.

```javascript
import 'keen-slider/keen-slider.min.css'
import KeenSlider from 'keen-slider'

```

--------------------------------

### slides

Source: https://keen-slider.io/docs

The slides as an array of HTML elements.

```APIDOC
## slides

### Description
The slides as an array of HTML elements.
```

--------------------------------

### on

Source: https://keen-slider.io/docs/react-native

Registers a callback function to be executed when a specific event hook is triggered. Can also be used to remove event listeners.

```APIDOC
## on

### Description
Registers an event hook when called.

### Method
`slider.on(eventName: string, callback: function, remove?: boolean)`

### Parameters
- **eventName** (string) - Specifies the event name.
- **callback** (function) - The function that will be called on this event.
- **remove** (boolean) - Whether the function should be set or removed. Default is `false`.
```

--------------------------------

### breakpoints

Source: https://keen-slider.io/docs

Changes the options or event hooks for a given breakpoint by overriding the options at the root level. Each key has to be a valid media query string. Note: If multiple media queries match, the last one is applied.

```APIDOC
## breakpoints: object

### Description
Changes the options or event hooks for a given breakpoint by overriding the options at the root level. Each `key` has to be a valid media query string e.g. `(orientation: portrait) and (min-width: 500px)`. Each `value` has to be an object with options and/or event hooks. Note: If multiple media queries match, the last one is applied.

### Example
```javascript
new KeenSlider('#my-slider', {
  loop: true,
  breakpoints: {
    '(min-width: 500px)': {
      loop: false,
    },
  },
})
```
```

--------------------------------

### Navigate to the Next Slide with Keen Slider

Source: https://keen-slider.io/docs

Call the `next` function to advance to the next slide if one exists.

```javascript
slider.next()
```

--------------------------------

### emit

Source: https://keen-slider.io/docs

Emits an event when called. Requires an eventName: string as an argument.

```APIDOC
## emit

### Description
Emits an event when called.

### Parameters
#### Path Parameters
- **eventName** (string) - Required - The name of the event to emit.
```

--------------------------------

### drag

Source: https://keen-slider.io/docs

Enables or disables mouse and touch control.

```APIDOC
## drag: boolean

### Description
Enables or disables mouse and touch control. Default is **true**
```

--------------------------------

### next

Source: https://keen-slider.io/docs

Changes the currently active slide to the next one if it exists.

```APIDOC
## next

### Description
Changes the currently active slide to the next one. If exists.
```

--------------------------------

### prev

Source: https://keen-slider.io/docs

Changes the currently active slide to the previous one if it exists.

```APIDOC
## prev

### Description
Changes the currently active slide to the previous one. If exists.
```

--------------------------------

### size

Source: https://keen-slider.io/docs/react-native

Represents the current size of the slider's viewport, which is either the width or height depending on the orientation.

```APIDOC
## size

### Description
The size of the container/viewport, width or height, depending on the vertical option.

### Property
`size`: number
```

--------------------------------

### track

Source: https://keen-slider.io/docs

Provides methods and properties for interacting with the slider's track.

```APIDOC
## track

### Description
Provides methods and properties for interacting with the slider's track.

### Methods
#### absToRel
Transforms an absolute index into the corresponding relative index.

#### add
Adds the passed value to the track position.

#### distToIdx
Transforms the passed distance into the corresponding index.

#### idxToDist
Returns the distance to the passed index. The second argument is optional and a boolean that specifies whether the passed index is absolute. The third argument is optional and specifies a reference position.

#### init
Reinitializes the track. Optionally, a new active index can be passed.

#### to
Sets the passed value as the track position.

#### velocity
Returns the current speed of the track as distance in relation to the viewport per millisecond.

### Properties
#### details
The current details of the track. Position, length, sizes and distances are relative to the container/viewport size. Is set to `null` if the slider is disabled or not ready.
  * **abs** (number) - Absolute index of the currently active slide.
  * **length** (number) - Length of the track in relation to the size of the viewport.
  * **min** (number) - minimum position according to the reachable slide
  * **max** (number) - maximum position according to the reachable slide
  * **minIdx** (number) - minimum index according to the reachable slide
  * **maxIdx** (number) - maximum index according to the reachable slide
  * **position** (number) - Current position of the track in relation to the size of the viewport.
  * **progress** (number) - Relative position of track in relation to the length.
  * **rel** (number) - Relative index of the currently active slide.
  * **slides** (array) - Details of each slide as an array of objects. Each object has the following properties:
    * **abs** (number) - Absolute index of this slide. Only reliable if portion is > 0
    * **distance** (number) - Distance of the slide to the beginning of the viewport.
    * **portion** (number) - Indicates how much of the slide is visible in the viewport.
    * **size** (number) - Size of the slide in relation to the size of the viewport.
  * **slidesLength** (number) - Length of the slides and the spacing between them.
```

--------------------------------

### Emit a Keen Slider Event

Source: https://keen-slider.io/docs/react-native

Call the emit() method to manually trigger a slider event. Provide the event name as a string argument.

```javascript
slider.emit(eventName)
```

--------------------------------

### Include Keen-Slider via HTML Script Tags

Source: https://keen-slider.io/docs

Include the Keen-Slider stylesheet and JavaScript file directly in your HTML. This method is suitable for projects that do not use a module bundler.

```html
<html>
  <head>
    <link
      rel="stylesheet"
      href="node_modules/keen-slider/keen-slider.min.css"
    />
    <!-- you can also load the stylesheet via CDN -->
    <!-- link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css" /-->
  </head>
  <body>
    <!-- YOUR SITE -->
    <script src="node_modules/keen-slider/keen-slider.js"></script>
    <!-- you can also load the script via CDN -->
    <!-- script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script-->
  </body>
</html>

```

--------------------------------

### Track Object Methods

Source: https://keen-slider.io/docs/react-native

The `track` object provides methods to manage and query the slider's internal state, such as position, indices, and distances.

```APIDOC
## `track.absToRel`

### Description
Transforms an absolute index into the corresponding relative index.

### Method
`track.absToRel(absoluteIndex: number): number`
```

```APIDOC
## `track.add`

### Description
Adds the passed value to the track position.

### Method
`track.add(value: number): void`
```

```APIDOC
## `track.details`

### Description
The current details of the track. Position, length, sizes and distances are relative to the container/viewport size. Is set to `null` if the slider is disabled or not ready.

### Properties
- **abs** (number): Absolute index of the currently active slide.
- **length** (number): Length of the track in relation to the size of the viewport.
- **min** (number): minimum position according to range or loop.
- **max** (number): maximum position according to range or loop.
- **minIdx** (number): minimum index according to range or loop.
- **maxIdx** (number): maximum position according to range or loop.
- **position** (number): Current position of the track in relation to the size of the viewport.
- **progress** (number): Relative position of track in relation to the length.
- **rel** (number): Relative index of the currently active slide.
- **slides** (array): Details of each slide as an array of objects. Each object has the following properties:
  - **abs** (number): Absolute index of this slide. Only reliable if portion is > 0.
  - **distance** (number): Distance of the slide to the beginning of the viewport.
  - **portion** (number): Indicates how much of the slide is visible in the viewport.
  - **size** (number): Size of the slide in relation to the size of the viewport.
- **slidesLength** (number): Length of the slides and the spacing between them.
```

```APIDOC
## `track.distToIdx`

### Description
Transforms the passed distance into the corresponding index.

### Method
`track.distToIdx(distance: number): number`
```

```APIDOC
## `track.idxToDist`

### Description
Returns the distance to the passed index. The second argument is optional and a boolean that specifies whether the passed index is absolute. The third argument is optional and specifies a reference position.

### Method
`track.idxToDist(index: number, absolute?: boolean, referencePosition?: number): number`
```

```APIDOC
## `track.init`

### Description
Reinitializes the track. Optionally, a new active index can be passed.

### Method
`track.init(newIndex?: number): void`
```

```APIDOC
## `track.to`

### Description
Sets the passed value as the track position.

### Method
`track.to(position: number): void`
```

```APIDOC
## `track.velocity`

### Description
Returns the current speed of the track as distance in relation to the viewport per millisecond.

### Method
`track.velocity(): number`
```

--------------------------------

### renderMode

Source: https://keen-slider.io/docs

It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'.

```APIDOC
## renderMode: 'precision' | 'performance' | 'custom'

### Description
It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to **'performance'**. If you want to create your own renderer, you can set this options to **'custom'**. Default is **'precision'**.
```

--------------------------------

### defaultAnimation

Source: https://keen-slider.io/docs

Sets the default animation of the functions `moveToIdx`, `next` and `prev`.

```APIDOC
## defaultAnimation: object

### Description
Sets the default animation of the functions `moveToIdx`, `next` and `prev`.

### Properties
- **duration** (number) - Duration of the animation in milliseconds.
- **easing** (function) - Easing of the animation as (`time`: number) => number.
```

--------------------------------

### Set Track Position in Keen Slider

Source: https://keen-slider.io/docs

Use the `to` function to directly set the track's position to a specified value.

```javascript
slider.track.to
```

--------------------------------

### update

Source: https://keen-slider.io/docs

Updates the slider when it is called. If the resizing hasn't been triggered or the options need to be changed.

```APIDOC
## update

### Description
Updates the slider when it is called. If the resizing hasn't been triggered or the options need to be changed.

### Parameters
#### Path Parameters
- **options** (object) - Optional - Specifies the new options with which the slider should be reinitialized. Default is `undefined`.
- **idx** (number) - Optional - Sets the current active slide to the given index. Default is `undefined`.
```

--------------------------------

### update

Source: https://keen-slider.io/docs/react-native

Updates the slider when it is called. If the resizing hasn't been triggered or the options need to be changed.

```APIDOC
## `update`

### Description
Updates the slider when it is called. If the resizing hasn't been triggered or the options need to be changed.

### Method
`slider.update(options?: object, idx?: number): void`

### Parameters
#### Options
- **options** (object): Specifies the new options with which the slider should be reinitialized. Default `undefined`.
- **idx** (number): Sets the current active slide to the given index. Default `undefined`.
```

--------------------------------

### Transform Absolute Index to Relative with Keen Slider Track

Source: https://keen-slider.io/docs

Use `absToRel` to convert an absolute slide index to its corresponding relative index within the track.

```javascript
slider.track.absToRel
```

--------------------------------

### slidesProps

Source: https://keen-slider.io/docs/react-native

Provides properties that need to be bound to individual slide elements, including refs for direct manipulation and styles for positioning and sizing.

```APIDOC
## slidesProps

### Description
Contains properties that has to be bound to the slides.

### Properties
- **ref** (object) - MutableRefObject that refers to a slide. Updates to the position are made directly to this reference.
- **styles** (object) - Contains the position and size styles for a specific slide.
```

--------------------------------

### Basic Usage of useKeenSliderNative Hook

Source: https://keen-slider.io/docs/react-native

Integrate Keen-Slider into your React Native component using the `useKeenSliderNative` hook. Call it at the top level of your component, optionally passing options and plugins. The hook returns the slider instance.

```javascript
import { useKeenSliderNative } from 'keen-slider/react-native'

export default () => {
  const slides = 4
  const slider = useKeenSliderNative({
    slides,
  })

  return (
    <View {...slider.containerProps}>
      {[...Array(slides).keys()].map(idx => {
        return (
          <View key={idx} {...slider.slidesProps[idx]}>
            <Text>Slide {idx}</Text>
          </View>
        )
      })}
    </View>
  )
}


```

--------------------------------

### containerProps

Source: https://keen-slider.io/docs/react-native

Provides properties that need to be bound to the slider's container element, such as event handlers for layout changes and touch interactions.

```APIDOC
## containerProps

### Description
Contains properties that has to be bound to the container.

### Properties
- **onLayout** (function) - Response to changes in the size of the container. Sets `size`-property.
- **onPanResponderMove** (function) - Handles touch movements.
- **onPanResponderRelease** (function) - Handles touch ends.
- **onPanResponderTerminate** (function) - Handles touch terminations.
- **onStartShouldSetPanResponder** (function) - Handles touch starts.
```

--------------------------------

### emit

Source: https://keen-slider.io/docs/react-native

Manually emits an event with a specified event name. This can be used to trigger event hooks programmatically.

```APIDOC
## emit

### Description
Emits an event when called. Requires an `eventName`: string as an argument.

### Method
`slider.emit(eventName: string)`

### Parameters
- **eventName** (string) - The name of the event to emit.
```

--------------------------------

### rtl

Source: https://keen-slider.io/docs

Changes the direction in which the slides are positioned, from left-to-right to right-to-left.

```APIDOC
## rtl: boolean

### Description
Changes the direction in which the slides are positioned, from left-to-right to right-to-left. Default is **false**.
```

--------------------------------

### moveToIdx

Source: https://keen-slider.io/docs

Changes the active slide with an animation when called.

```APIDOC
## moveToIdx

### Description
Changes the active slide with an animation when called.

### Parameters
#### Path Parameters
- **index** (number) - Required - Specifies the index to be set active.
- **absolute** (boolean) - Optional - Defines if the index is absolute. Default is `false`.
- **animation** (object) - Optional - Modifies the default animation. Can have the following properties:
  * **duration** (number) - Sets the animation duration in milliseconds. Default is `500`.
  * **easing** (function) - Sets the easing function. Default is `t => 1 + --t * t * t * t * t`.
```

--------------------------------

### Track Details in Keen Slider

Source: https://keen-slider.io/docs

Access detailed information about the slider's track, including position, length, and individual slide data. This object is null if the slider is disabled or not ready.

```javascript
slider.track.details
```

--------------------------------

### Add Value to Track Position in Keen Slider

Source: https://keen-slider.io/docs

Use the `add` function to adjust the track's current position by a specified value.

```javascript
slider.track.add
```

--------------------------------

### range

Source: https://keen-slider.io/docs

Regardless of the slide number, you can define the range of accessible slides.

```APIDOC
## range: object

### Description
Regardless of the slide number, you can define the range of accessible slides.

### Properties
- **min** (number) - sets minimum accessible index
- **max** (number) - sets maximum accessible index
- **align** (boolean) - aligns the maximum position to the end of the last slide
```

--------------------------------

### Register a Keen Slider Event Hook

Source: https://keen-slider.io/docs/react-native

Use the on() method to register a callback function for a specific event. Set the 'remove' parameter to true to unregister the hook.

```javascript
slider.on(eventName, callback, remove)
```

--------------------------------

### Use Keen-Slider Hook in React

Source: https://keen-slider.io/docs

Integrate Keen-Slider into a React component using the `useKeenSlider` hook. This hook manages the slider instance and provides a ref for the container.

```javascript
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react' // import from 'keen-slider/react.es' for to get an ES module

export default () => {
  const [sliderRef, instanceRef] = useKeenSlider(
    {
      slideChanged() {
        console.log('slide changed')
      },
    },
    [
      // add plugins here
    ]
  )

  return (
    <div ref={sliderRef} className="keen-slider">
      <div className="keen-slider__slide">1</div>
      <div className="keen-slider__slide">2</div>
      <div className="keen-slider__slide">3</div>
    </div>
  )
}


```

--------------------------------

### moveToIdx

Source: https://keen-slider.io/docs/react-native

Changes the active slide to a specified index, with optional animation control.

```APIDOC
## moveToIdx

### Description
Changes the active slide with an animation when called.

### Method
`slider.moveToIdx(index: number, absolute?: boolean, animation?: object)`

### Parameters
- **index** (number) - Specifies the index to be set active.
- **absolute** (boolean) - Defines if the index is absolute. Default is `false`.
- **animation** (object) - Modifies the default animation. Object can have the following properties:
  - **duration** (number) - Sets the animation duration in milliseconds. Default is `500`.
  - **easing** (function) - Sets the easing function. Default is `t => 1 + --t * t * t * t * t`.
```

--------------------------------

### disabled

Source: https://keen-slider.io/docs

If this option is set to true, the slider is disabled. No styles or events will be applied.

```APIDOC
## disabled: boolean

### Description
If this option is set to **true** , the slider is disabled. No styles or events will be applied. The default is **false**.
```

--------------------------------

### loop

Source: https://keen-slider.io/docs

Enables or disables carousel/loop functionality of the slider. This option can also be an object where you can set the `min` and/or the `max` index of the carousel.

```APIDOC
## loop: boolean | object

### Description
Enables or disables carousel/loop functionality of the slider. This option can also be an object where you can set the `min` and/or the `max` index of the carousel.
Defaults to **false**.
```

--------------------------------

### rubberband

Source: https://keen-slider.io/docs

Enables or disables the rubberband behavior for dragging and animation after a drag.

```APIDOC
## rubberband: boolean

### Description
Enables or disables the rubberband behavior for dragging and animation after a drag. Default is **true**.
```

--------------------------------

### Move to a Specific Slide Index

Source: https://keen-slider.io/docs/react-native

Use moveToIdx() to change the active slide. You can specify an absolute index, and optionally enable or customize the animation.

```javascript
slider.moveToIdx(index, absolute, animation)
```

--------------------------------

### Update Slider Options and Index in React Native

Source: https://keen-slider.io/docs/react-native

Use the `update` function to reinitialize the slider with new options or set a specific active slide index. This is useful when resizing or changing configurations dynamically.

```javascript
slider.update(options, idx)
```

--------------------------------

### dragSpeed

Source: https://keen-slider.io/docs

Set the speed that is applied to the slider when dragging it. Number can be passed as a value or function. Minus values would invert the swipe direction.

```APIDOC
## dragSpeed: number | function

### Description
Set the speed that is applied to the slider when dragging it. Number can be passed as a value or function. Minus values would invert the swipe direction. Default is **1**
```

--------------------------------

### animator.stop

Source: https://keen-slider.io/docs/react-native

Stops the currently active animation, if one is in progress.

```APIDOC
## animator.stop

### Description
Stops the currently active animation, if there is one.

### Method
`animator.stop()`
```

--------------------------------

### Destroy Slider

Source: https://keen-slider.io/docs

Destroys the slider instance, removing all event listeners and applied styles.

```APIDOC
## destroy()

### Description
A function that destroys the slider when called. All events and applied styles will be removed.

### Method
`destroy()

```

--------------------------------

### Animator Stop

Source: https://keen-slider.io/docs

Stops the currently active animation, if there is one.

```APIDOC
## animator.stop()

### Description
Stops the currently active animation, if there is one.

### Method
`animator.stop()

```
Tokens:
Raw