Development
Keen Slider GitHub Guide for Developers
A complete walkthrough of the Keen Slider GitHub repository. Learn how to clone, fork, and contribute to this powerful open-source carousel library.
Read Guide →
v6.8.3 — Latest Stable Release
Keen Slider: Responsive JavaScript Carousel Library
Keen Slider is a free, open-source JavaScript carousel library with native touch support, zero dependencies, and framework adapters for React, Vue, and Angular. Build any slider in minutes.
MIT Licensed
Zero Dependencies
280k+ Developers
TypeScript Ready
About ProfWiz
Learn More About Us
The Carousel Library That Gets Out of Your Way
ProfWiz is the official distribution home for Keen Slider — a production-grade JavaScript carousel library engineered for developers who need a fast, flexible, and dependency-free slider solution. Whether you're building an image gallery, a product showcase, or a hero rotator, Keen Slider adapts to your design system rather than forcing you into its own.
The library weighs under 10 KB gzipped, ships with first-class TypeScript definitions, and offers dedicated hooks for React and Vue as well as clean integration patterns for Angular. Its plugin architecture means you add only the features your project actually needs — autoplay, thumbnail sync, marquee mode, or custom animations — without bloating your bundle.
ProfWiz exists to make Keen Slider as easy to discover, download, and get started with as possible. You'll find detailed setup guides, framework-specific tutorials, and working code examples all in one place.
280k+
Active Developers
42KB
Full Package Size
0
Dependencies
MIT
Open License
Features
Everything a Modern Carousel Needs
Keen Slider ships with the right set of primitives and stays out of the rest.
Touch & Drag
Native pointer, mouse, and touch events handled automatically. Works on every device without extra configuration.
Zero Dependencies
Keen Slider has no runtime dependencies. Import one file and you have a complete carousel library.
Responsive Breakpoints
Define different slide counts and spacing at each breakpoint using familiar CSS media query syntax.
TypeScript Support
Full TypeScript definitions included. Get autocomplete and type checking without any extra setup.
Loop Mode
Enable infinite looping with a single option. The slider reorders slides seamlessly for continuous scrolling.
Autoplay Plugin
Add time-based auto-advancement with pause on hover, drag cancellation, and accessible stop controls.
Framework Hooks
React useKeenSlider hook and Vue useKeenSlider composable ship in the same package. No separate installs.
Vertical Mode
Switch to a vertical drag axis for news tickers, vertical galleries, and scroll-snapped lists.
Custom Animations
Build fade transitions, scale effects, or 3D flips through the animation callback API.
How To Use
Up and Running in Six Steps
From zero to a working carousel in under five minutes, no prior setup required.
Download or Install
Get Keen Slider via the Download button above, or run npm install keen-slider in your project.
Include the CSS
Add keen-slider.min.css to your page head or import it in your JS bundle entry point.
Add Slider Markup
Create a container with class keen-slider. Each direct child with keen-slider__slide becomes a slide.
Initialize the Slider
Call new KeenSlider('#selector', options) or use the React/Vue hook for your framework.
Configure Options
Set loop, slides.perView, breakpoints, and any plugins you need in the options object.
Deploy and Enjoy
That's it. Your slider is production-ready, mobile-friendly, and accessible right out of the box.
Download
Everything You Need, Ready to Use
Keen Slider ships as a single lightweight file. No build step required for CDN usage. Works with npm, yarn, pnpm, and direct script tags in any HTML page.
Download Keen Slider Free
One file, zero dependencies, instant carousel. Used by 280,000+ developers worldwide.
Download v6.8.3
100% free, no account required
MIT license — use in any project
Virus-scanned and safe to download
No tracking or bundled adware
Compatibility
Works Everywhere Your Users Are
Keen Slider runs on every modern platform and browser without polyfills.
| Platform / Browser | Support | Min Version | Notes |
|---|---|---|---|
| Windows 10 / 11 | ✓ Full | Windows 10+ | All browsers supported |
| macOS | ✓ Full | macOS 10.14+ | Touch on trackpad works |
| Android | ✓ Full | Android 7+ | Native touch events |
| iOS / iPadOS | ✓ Full | iOS 13+ | Pointer events used |
| Google Chrome | ✓ Full | Chrome 70+ | Recommended browser |
| Microsoft Edge | ✓ Full | Edge 79+ | Chromium-based Edge |
| Mozilla Firefox | ✓ Full | Firefox 65+ | All features work |
| Apple Safari | ✓ Full | Safari 12.1+ | CSS scroll snap used |
Who It's For
Built for Every Kind of Builder
Keen Slider fits naturally into any workflow, from weekend projects to production apps.
Developers
Build Product Sliders Fast
Integrate Keen Slider React or Vue in minutes. The hook API feels native to your component model and the TypeScript types keep your IDE helpful.
Designers
Pixel-Perfect Presentations
Keen Slider puts zero opinion on your markup or CSS. Your spacing, your colors, your transitions — the library just handles the drag physics.
Students
Copy-Paste Learning
Every option is documented with working examples. Start from a CodePen demo and learn by modifying real, runnable code without a build step.
Website Owners
Hero Rotators That Work
Add an autoplay hero slider to any WordPress, Webflow, or static site using the CDN script tag. No npm, no build, no problem.
Bloggers & Creators
Showcase Your Content
Turn an image gallery into an interactive experience. Thumbnail navigation, swipe gestures, and dot indicators all work out of the box.
Agencies
Reuse Across Clients
MIT license means you can ship Keen Slider in every client project. One library to learn, one set of patterns to maintain across your portfolio.
Developer Reviews
Trusted by Thousands of Developers
Here's what developers say about Keen Slider in their projects.
★★★★★
"I replaced a heavy carousel library with Keen Slider and cut my bundle size by 40 KB. The React hook is exactly what I wanted — no wrapper component, just a ref and an instance."
Marcus T.
Frontend Engineer
★★★★★
"The breakpoint system uses real CSS media queries, which means my responsive logic is in one place instead of scattered between CSS and JS options. That alone is worth the switch."
Priya S.
UI Developer
★★★★★
"Set up a thumbnail gallery with two synced Keen Slider instances in about 30 minutes following the documentation. The lifecycle events make coordination between instances straightforward."
James O.
Full Stack Dev
★★★★★
"Used it on an Angular project. The ViewChild pattern works cleanly and calling destroy in ngOnDestroy is exactly what you would do with any other DOM library. No surprises."
Elena M.
Angular Developer
★★★★★
"The CDN version is perfect for WordPress projects where I don't want a build step. One script tag, one CSS link, and the slider just works with our existing Gutenberg blocks."
Tom K.
WordPress Dev
★★★★★
"Accessibility was my biggest concern and Keen Slider handles it well. Adding a visible stop button for autoplay was documented clearly and the keyboard navigation works without hacks."
Aisha P.
A11y Specialist
Guide
Learn Keen Slider Step by Step
Practical articles covering setup, framework integration, and advanced patterns.
React
Keen Slider React Setup and Usage Guide
Step-by-step instructions to install, configure, and use Keen Slider React in your next project. Covers hooks, autoplay, and responsive breakpoints.
Read Guide →
Setup
Keen-slider NPM Install and Setup Guide
Everything you need to install and configure keen-slider via npm. Covers package setup, import paths, bundler compatibility, and first-run verification.
Read Guide →
Examples
Keen Slider CodePen Examples and Demos
Explore the best Keen Slider CodePen demos. Learn from working code examples covering basic sliders, thumbnail navigation, autoplay, and custom animations.
Read Guide →
Examples
Keen-slider Examples for Modern Carousels
A practical collection of keen-slider examples covering image carousels, product sliders, hero rotators, and multi-slide layouts with working code.
Read Guide →
Features
Keen Slider Autoplay Setup Guide
A complete guide to adding Keen Slider autoplay with pause on hover, custom intervals, restart on drag, and accessible stop controls.
Read Guide →
FAQ
Questions Developers Actually Ask
Straight answers to the questions that come up most during Keen Slider setup.
Setup & Installation
No. You can load Keen Slider directly from a CDN using a standard script tag. Node.js is only required if you want to install the package via npm for use in a bundled JavaScript project.
Yes. Keen Slider is released under the MIT license, which allows free use in personal, open-source, and commercial projects. No attribution is required, though it's always appreciated.
Yes. Full TypeScript type definitions are bundled with the npm package. You don't need to install a separate @types package — autocomplete and type checking work immediately after installation.
The useKeenSlider hook works with React 16.8 and later, including React 18. It uses standard hooks (useRef, useEffect) and has no compatibility issues with concurrent features or strict mode.
Absolutely. The UMD build available on jsDelivr and unpkg works directly in a browser script tag. Include the CSS link and the JS script, then call new KeenSlider() — no bundler, no build step required.
Features & Behavior
Autoplay is implemented as a plugin. Pass a function as the third argument to new KeenSlider() or useKeenSlider() that uses slider lifecycle events (created, animationEnded, dragStarted) to manage a setTimeout. Full code examples are in the Autoplay Guide.
Yes. Set slides.perView to "auto" and Keen Slider will read each slide's natural CSS width instead of calculating equal widths. This is ideal for tag clouds, logo rows, or content carousels with variable-length text.
Yes. Add vertical: true to the options object and the drag axis switches from horizontal to vertical. Set a fixed height on the container and the slider manages overflow. Vertical mode works with all other options including loop and autoplay.
Use the slideChanged event to call moveToIdx on the other instance. Create the main slider first, then pass a reference callback to the thumbnail slider's slideChanged. Both instances can trigger updates in each other without creating an infinite loop if you check the current index before calling move.
Keen Slider handles drag and pointer interactions accessibly. For autoplay, WCAG 2.1 requires a visible stop control — the Autoplay Guide shows how to add one. Add appropriate ARIA attributes (role="region", aria-label, aria-live) to the container for screen reader announcement of slide changes.
Start Building with Keen Slider Today
Join 280,000+ developers who use Keen Slider to build fast, responsive carousels without the overhead.