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

components/src/components/keen-slider at master · atomicojs/componentsGitHub

Modules

Default

import { KeenSlider } from "@atomico/keen-slider";

Elements

// Import that does not associate the tagName by default
import { KeenSlider } from "@atomico/keen-slider/elements";

React

import { KeenSlider } from "@atomico/keen-slider/react";

Preact

import { KeenSlider } from "@atomico/keen-slider/preact";

Html CDN

<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

@atomico/keen-slider (React) - StackBlitzStackBlitz