Free Library Agnostic Touch Slider with Swipe | keen-slider

keen-slider is a free neutral touch slider for the library with original swiper/scroll behavior and great performance. It does not come with any dependencies, support for print writing, or support for multi-touch, and is compatible with all popular browsers.

More Features:

  • Content lazy loading.
  • Optional pagination & navigation controls.
  • An infinite loop is similar to a carousel.
  • Multiple slides on a web page.
  • Auto snaps to the subsequent/prev slide after transitioning.
  • Horizontal & Vertical modes.
  • Fully responsive and mobile-friendly primarily based on media queries.
  • Works with React, Angular, Vue, and Vanilla JavaScript.
  • Powerful but straightforward to implement.
  • And rather more.

Must Read: [CSS3] Responsive jQuery Coverflow Touch Slider Plugin | flipster

How to make use of it:

Install & Download:

# NPM
$ npm install keen-slider --save

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 information 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.

<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 slider.

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
    
});

6. API strategies.

// 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
    },
});

See Demo And Download

Official Website(rcbyr): Click Here

This superior jQuery/javascript plugin is developed by rcbyr. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *