keen-slider

What is keen-slider?

keen-slider is a lightweight, responsive, and touch-enabled slider library for creating carousels and sliders in web applications. It is highly customizable and supports various features such as navigation, autoplay, and different types of animations.

What are keen-slider's main functionalities?

Basic Slider

This code initializes a basic slider on an element with the ID 'my-slider'.

const slider = new KeenSlider('#my-slider');

Navigation

This code initializes a slider with looping enabled and adds event listeners to 'prev' and 'next' buttons to navigate through the slides.

const slider = new KeenSlider('#my-slider', { loop: true });
document.getElementById('prev').addEventListener('click', () => slider.prev());
document.getElementById('next').addEventListener('click', () => slider.next());

Autoplay

This code initializes a slider with looping enabled and sets it to autoplay with a duration of 2000 milliseconds between slides.

const slider = new KeenSlider('#my-slider', { loop: true, duration: 2000 });

Responsive Design

This code initializes a slider that adjusts the number of slides visible based on the screen width, making it responsive.

const slider = new KeenSlider('#my-slider', { breakpoints: { '(min-width: 768px)': { slidesPerView: 2 }, '(min-width: 1024px)': { slidesPerView: 3 } } });

Other packages similar to keen-slider

swiper

Swiper is a modern touch slider with hardware-accelerated transitions and a wide range of features. It is highly customizable and supports various functionalities such as parallax effects, lazy loading, and more. Compared to keen-slider, Swiper offers more built-in features and a larger community.

slick-carousel

Slick Carousel is a popular and easy-to-use slider library that supports multiple breakpoints, variable width, and more. It is known for its simplicity and ease of integration. While keen-slider is more lightweight, Slick Carousel provides a more extensive set of features out of the box.

glidejs

Glide.js is a lightweight and flexible slider library that focuses on performance and simplicity. It offers basic slider functionalities with a minimalistic approach. Compared to keen-slider, Glide.js is more focused on providing a simple and performant solution with fewer built-in features.

README

Easily create sliders, carousels and much more.

Features

• Library Agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
• Lightweight: No dependencies, only ~5.5KB gzipped
• Mobile First: Supports multi touch and is fully responsive
• Great Performance: Native touch/swipe behavior
• Compatible: Works in all common browsers, including >= IE 10 and React Native
• Open Source: Freely available under the MIT license
• Extensible: Rich but simple API

Getting Started

• Documentation
• Examples

Used by

Contributing

Please open an issue if you find a bug or need some help. You are also free to create a pull request.