1 of 1

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

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>

most of the properties are homologous to keen-slider documentation

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