English
Ask or search…
⌃K
Links

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

Modules

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>

Properties / attributes

most of the properties are homologous to keen-slider documentation​
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>

Events

CreateSlider
dispatched when defining the slider prop, useful for accessing the keen-slider instance

Methods

KeenSlider.next()
next slide
KeenSlider.prev()
prev slide

Examples

React

​