@atomico/keen-slider
The Keen-slider api but with WebComponents
Webcomponent built with Atomico JS to use keen-slider as webcomponent. Includes additional support for React and Preact.
Default
Elements
React
Preact
Html CDN
import { KeenSlider } from "@atomico/keen-slider";
// Import that does not associate the tagName by default
import { KeenSlider } from "@atomico/keen-slider/elements";
import { KeenSlider } from "@atomico/keen-slider/react";
import { KeenSlider } from "@atomico/keen-slider/preact";
<script
type="module"
src="http://esm.sh/@atomico/keen-slider"></script>
<atomico-keen-slider><atomico-keen-slider>
Prop/Attr | Type / default | Description |
|---|---|---|
loop | boolean | Enables or disables carousel/loop functionality of the slider. |
drag | boolean | Enables or disables mouse and touch control. Default is tru |
disabled | boolean | |
vertical | boolean | Changes the direction of the slider from horizontal to vertical. (Note: The height of the container must be defined if vertical is true) Default is false. |
rtl | boolean | Changes the direction in which the slides are positioned, from left-to-right to right-to-left. Default is false. |
rubberband | boolean | Enables or disables the rubberband behavior for dragging and animation after a drag. Default is tr |
autoplay | boolean | |
autoplayLoop / autoplay-loop | number / 2000 | |
initial | number | |
mode | "snap" | "free" | "free-snap" | |
slidesPerView / slides-per-view | string | |
slidesSpacing / slides-spacing | string | |
slidesOrigin / slides-origin | string | |
slider | KeenSliderInstance | |
The slidesPerView, slidesSpacing and slidesOrigin props accept responsive expressions, example:
<atomico-keen-slider
slider-per-view="1, 2 520px, 3 720px"
></atomico-keen-slider>
CreateSlider
dispatched when defining the slider prop, useful for accessing the keen-slider instance
KeenSlider.next()next slide
KeenSlider.prev()prev slide
Last modified 7mo ago