@uppercod/keen-slider
Working...
It is a wrapper for keen-slider as a webcomponent created with Atomico.
Example
HTML
<keen-slider>
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</keen-slider>
React
To use in React you must first install the dependency @atomico/react
.
import { Slider } from "@uppercod/keen-slider/components.react";
function App() {
return (
<>
<Slider>
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</Slider>
</>
);
}
Api
currently the component reflects the following options from the original 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
<keen-slider
breakpoints='{">=500px": { "loop": false, "duration": 500, "autoplay": false }}'
></keen-slider>