Skip to content

Latest commit

 

History

History
96 lines (75 loc) · 1.61 KB

File metadata and controls

96 lines (75 loc) · 1.61 KB

Overview

Keen Slider is a lightweight, library-agnostic slider with native touch/swipe behavior. The React bindings provide an intuitive API while maintaining the core library's minimal footprint and high performance.

Features

  • Extremely lightweight (~5KB)
  • Touch/swipe support
  • Mouse drag
  • Responsive breakpoints
  • Infinite loop
  • Free mode (momentum scrolling)
  • Vertical and horizontal
  • RTL support
  • Multiple slides per view
  • Spacing between slides
  • Centered slides
  • Auto height
  • Lazy loading
  • Custom animations
  • Plugin system
  • TypeScript support

Slider Modes

  • Standard carousel
  • Free mode (scroll)
  • Snap mode
  • Loop mode
  • Vertical orientation
  • Mixed modes

Navigation

  • Navigation plugin
  • Dots plugin
  • Custom controls
  • Keyboard navigation
  • Arrow keys
  • Touch gestures

Plugins

  • Navigation
  • Autoplay
  • Zoom
  • Lazy loading
  • Parallax
  • Custom plugins

Performance

  • Native scroll performance
  • GPU acceleration
  • Minimal JavaScript
  • Efficient re-renders
  • Optimized animations
  • Small bundle size

Customization

  • CSS customization
  • Custom animations
  • Custom easing
  • Transition timing
  • Event hooks
  • Lifecycle callbacks

React Integration

  • useKeenSlider hook
  • Ref-based API
  • Easy state management
  • Dynamic slides
  • Conditional rendering

Responsive

  • Breakpoint configuration
  • Slides per view by breakpoint
  • Spacing per breakpoint
  • Different modes per breakpoint

Use Cases

  • Product galleries
  • Image carousels
  • Content sliders
  • Mobile app-like navigation
  • Full-screen slides
  • Card carousels
  • Timeline sliders

Pricing

Free and open-source under the MIT license.