https://github.com/uppercod/keen-slider

It is a wrapper for keen-slider as a webcomponent created with Atomico.
https://github.com/uppercod/keen-slider

Last synced: about 3 hours ago
JSON representation

It is a wrapper for keen-slider as a webcomponent created with Atomico.

• Host: GitHub
• URL: https://github.com/uppercod/keen-slider
• Owner: UpperCod
• Created: 2021-06-25T19:09:17.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T05:48:37.000Z (over 2 years ago)
• Last Synced: 2024-10-13T08:09:36.932Z (24 days ago)
• Language: TypeScript
• Homepage: https://uppercod.github.io/keen-slider/
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @uppercod/keen-slider

**Working...**

It is a wrapper for keen-slider as a webcomponent created with Atomico.

## Example

### HTML

```html

  
slide 1

  
slide 2

  
slide 3

  
slide 4


```

### React

To use in React you must first install the dependency `@atomico/react`.

```jsx

import { Slider } from "@uppercod/keen-slider/components.react";

function App() {

  return (

    <>

      

        
slide 1

        
slide 2

        
slide 3

        
slide 4

      

    >

  );

}

```


## Api

currently the component reflects the following options from the [original api](https://keen-slider.io/api/#api).

### Properties

| Property / Attribute            | Type                   | Description                                                                                                              |

| ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |

| loop                            | boolean                | Infinite loop of slides                                                                                                  |

| centered                        | boolean                | Active slide will be centered - only makes sense, when slidesPerView is greater than 1                                   |

| vertical                        | boolean                | Set the slider direction to vertical                                                                                     |

| autoplay                        | boolean                | defines if the slide advances automatically                                                                              |

| autoplayMs / autoplay-ms        | number, default `5000` | timeout to retrieve autoplay loop                                                                                        |

| duration                        | number, default `500`  | Set the animation duration for the "snap"-mode                                                                           |

| slidesPerView / slides-per-view | number, default `1`    | Number of slides per view                                                                                                |

| spacing                         | number, default `0`    | Spacing between slides in pixel                                                                                          |

| mode                            | string, default `snap` | Set the mode of movement of the slider                                                                                   |

| slider                          | KeenSlider             | KeenSlider Last Instance                                                                                                 |

| breakpoints                     | Object                 | defines the breakpoints for the instance of KeenSlider, eg `'(min-width: 720px) and (max-width: 1000px)': {loop: false}` |

### Events

## breakpoints

```html

```