Author: | rcbyr |
---|---|
Views Total: | 922 views |
Official Page: | Go to website |
Last Update: | July 5, 2023 |
License: | MIT |
Preview:

Description:
keen-slider is a multifunctional, framework-agnostic slider library that can be used to transition between any elements with touch & drag events.
More Features:
- Content lazy loading.
- Optional pagination & navigation controls.
- Infinite loop just like a carousel.
- Multiple slides on a page.
- Auto snaps to the next/prev slide after transitioning.
- Horizontal & Vertical modes.
- Fully responsive and mobile-friendly based on media queries.
- Works with React, Angular, Vue, and Vanilla JavaScript.
- Powerful yet easy to implement.
- And much more.
Install & Download:
# NPM $ npm install keen-slider --save
How to use it (Vanilla JS):
1. Import the keen-slider as a module.
import 'keen-slider/keen-slider.min.css' import KeenSlider from 'keen-slider'
2. Or load the JavaScript and CSS files from a CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.css" /> <script src="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.js"></script>
3. Create a new keen-slider instance.
var slider1 = new KeenSlider("#slider1");
4. Add slides to the keen slider and done.
<div id="slider1" class="keen-slider"> <div class="keen-slider__slide">Slide 1</div> <div class="keen-slider__slide">Slide 2</div> <div class="keen-slider__slide">Slide 3</div> <div class="keen-slider__slide">Slide 4</div> <div class="keen-slider__slide">Slide 5</div> ... </div>
5. Config & customize the keen slider by passing the following options object as the second parameter to the KeenSlider
method.
var slider1 = new KeenSlider("#slider1",{ // auto set the slider to the height of the tallest slide autoHeight: true, // auto center the current slide centered: false, // pass options for different screen size // e.g. // breakpoints: { // '(min-width: 720px) and (max-width: 1000px)': { // options here // }, // } breakpoints: null, // enable mouse drag and touch swipe events controls: true, // adjust the speed that is translated to the slider when dragging dragSpeed: 1, // friction factor friction: 0.0025, // enable infinite loop loop: false, // initial slide initial: 0, // duration of the animation duration: 500, // slide selector slides: '.keen-slider__slide', // enable vertical mode vertical: false, // reset the slider on window resize resetSlide: false, // how many slides per view slidesPerView: 1, // space between slides spacing: 0, // "snap": auto snap to the next/prev slide // "free-snap": free mode + auto snap // "free": free mode mode: 'snap', // simulate rubberband if moving or dragging above the slider edge rubberband: true, // cancel on leave cancelOnLeave: true });
6. API methods.
// go to the next slide slider1.next(); // back to the previous slide slider1.prev(); // go to a specific slide slider1.moveToSlide (slide); // go to a relative slide slider1.moveToSlideRelative(slide, nearest, duration); // enable/disable touch & drag events slider1.controls(); // refresh the slider slider1.refresh(options); // re-init the slider slider1.Reinitialize(); // re-calc the width/height of the slider // useful when new items are added to the slider slider1.resize(); // destroy the slider instance slider1.destroy(); // return the details of the slider. slider1.details();
7. Event handlers.
var slider1 = new KeenSlider("#slider1",{ created: slider => { // do something }, mounted: slider => { // do something }, beforeChange: slider => { // do something }, afterChange: slider => { // do something }, slideChanged: slider => { // do something }, dragStart: slider => { // do something }, dragEnd: slider => { // do something }, move: slider => { // do something }, destroyed: slider => { // do something }, });
Changelog:
v6.8.6 (07/05/2023)
- Bugfixes
v6.8.5 (11/24/2022)
- Bugfixes
v6.8.3 (10/18/2022)
- Bugfixes
v6.8.2 (09/19/2022)
- Fixed react hook for React 18
v6.8.1 (09/15/2022)
- Fixed the prevention of clicks when dragging is active
v6.8.0 (09/12/2022)
- Changed the method of preventing clicks when dragging, which improves performance
v6.7.0 (06/15/2022)
- Added new property (slidesLength) to the track details, specifying the length of the slides and the distances between them.
- Bugfixes
v6.6.14 (05/15/2022)
- bugfix
v6.6.13 (05/05/2022)
- update
v6.6.12 (05/01/2022)
- fix plugin loading for ios11
v6.6.11 (04/30/2022)
- fix: maxIdx when trackLength is 0
v6.6.10 (04/21/2022)
- set property out of .keen-slider scope
v6.6.9 (04/17/2022)
- use own sign method
v6.6.8 (04/16/2022)
- fix runtime error
v6.6.7 (04/13/2022)
- fix rounding error maxRelativeIdx
v6.6.5 (03/27/2022)
- refactor performance mode
v6.6.3 (01/05/2022)
- bugfix
v6.6.2 (12/22/2021)
- bugfix
v6.6.1 (12/20/2021)
- bugfix
v6.4.1 (12/13/2021)
- check number of slides before set range
v6.4.0 (12/12/2021)
- Remove plugin override
v6.3.5 (12/11/2021)
- fix: use correct options
v6.3.4 (12/08/2021)
- fix: types
v6.3.2 (12/06/2021)
- bugfix
v6.3.1 (12/06/2021)
- fix: get container and slides
v6.3.0 (12/05/2021)
- extend update function
v6.2.4 (12/03/2021)
- update
v6.2.0 (12/01/2021)
- calc targetIdx for animations
v6.0.5 (11/29/2021)
- update
v6.0.4 (11/28/2021)
- update
v6.0.2 (11/27/2021)
- fixed typo
v6.0.1 (11/25/2021)
- update
v5.5.0 (06/10/2021)
- make adjustment of slidesPerView optional
v5.4.1 (05/11/2021)
- fix click events within slides
v5.4.0 (01/17/2021)
- feat: add pubfunc to get current options
v5.3.5 (12/02/2020)
- added cancelOnLeave option
v5.3.2 (11/11/2020)
- remove duplicate property
v5.2.4 (10/03/2020)
- update
v5.2.3 (08/28/2020)
- update
v5.2.2 (07/23/2020)
- set passive options of event listeners
v5.2.1 (07/20/2020)
- update
v5.2.0 (07/14/2020)
- simplified the assignment
v5.1.0 (07/11/2020)
- Added possibility for dynamic slides per view
v5.0.5 (07/04/2020)
- update
v5.0.3 (06/29/2020)
- fixed vertical slider and reszing
v4.2.6 (06/26/2020)
- reset slidesPerView to length-1 only in loop mode
- CSS refactor