# Keen Slider — High-Performance Touch Slider and Carousel

> A framework-agnostic touch slider with native-like kinetic scrolling, supporting React, Vue, Angular, and vanilla JavaScript.

## Install

Save as a script file and run:

# Keen Slider — High-Performance Touch Slider and Carousel

## Quick Use
```bash
npm install keen-slider
# React example:
# import { useKeenSlider } from 'keen-slider/react'
# const [sliderRef] = useKeenSlider({ loop: true })
```

## Introduction
Keen Slider is a lightweight, framework-agnostic touch slider that delivers a native-like swipe experience. It uses no dependencies, handles gestures natively, and provides smooth momentum-based scrolling on both mobile and desktop.

## What Keen Slider Does
- Renders responsive carousels and sliders with touch and mouse support
- Provides native-feeling kinetic scrolling with configurable friction
- Supports multiple slides per view, variable widths, and vertical sliding
- Offers framework bindings for React, Vue, Angular, Svelte, and vanilla JS
- Handles responsive breakpoints with per-breakpoint configuration

## Architecture Overview
Keen Slider calculates slide positions and handles gesture tracking in pure JavaScript without DOM manipulation libraries. It uses requestAnimationFrame for smooth animation and pointer events for cross-device input. The core is framework-agnostic, with thin adapter hooks for React, Vue, and other frameworks.

## Self-Hosting & Configuration
- Install via npm and import the framework-specific hook or the core class
- Configure slides per view, spacing, loop mode, and animation duration
- Add plugins for autoplay, navigation arrows, and pagination dots
- Set responsive breakpoints with different configurations per screen size
- The CSS file is optional—Keen Slider works with your own layout styles

## Key Features
- Native-feeling touch interaction with momentum and snap points
- Zero dependencies and tiny bundle size under 5KB gzipped
- Plugin architecture for autoplay, thumbnails, and custom navigation
- Accessibility support with keyboard navigation and ARIA attributes
- SSR-compatible with server-side rendering frameworks

## Comparison with Similar Tools
- **Swiper** — full-featured slider with more built-in modules; Keen Slider is lighter with a plugin system
- **Embla Carousel** — similar lightweight approach; Keen Slider offers simpler API with built-in framework hooks
- **Splide** — accessible slider with extensions; Keen Slider focuses on native touch feel
- **Glide.js** — lightweight slider; Keen Slider provides better momentum scrolling and modern hooks

## FAQ
**Q: Does Keen Slider support infinite looping?**
A: Yes. Set the loop option to true for seamless infinite scrolling.

**Q: Can I use variable-width slides?**
A: Yes. Keen Slider supports custom slide widths and auto-sizing.

**Q: Is it accessible?**
A: Yes. It supports keyboard navigation and ARIA roles for screen readers.

**Q: Does it work without a framework?**
A: Yes. The core class works with vanilla JavaScript and any HTML structure.

## Sources
- https://github.com/rcbyr/keen-slider
- https://keen-slider.io

---
Source: https://tokrepo.com/en/workflows/asset-9f3b8de4
Author: Script Depot