Get new jQuery plugins just once a week

×

swipe-li

FavoriteLoadingAdd to favorites

September 23, 2014

swipeable lists

swipe-li is a jQuery plugin for a three pane swipeable element. Swipe right for accept. Swipe left for reject.

Created by Varun Vachhar

Download

Example

swipe-li jQuery plugin

swipeable lists

Swipe-li

A three pane swipeable element. Swipe right for accept. Swipe left for reject. (AngularJS directive)

Live Demo

The code is largely based on the hammer.js carousel demo.

Developed at rangle.io

Dependencies

Usage

bower install swipe-li --save

Include the following files in your app:

bower_components/jquery/dist/jquery.js
bower_components/modernizr/modernizr.js
bower_components/angular/angular.js
bower_components/hammerjs/hammer.js
bower_components/angular-touch/angular-touch.js
bower_components/dist/swipe-li.css
bower_components/dist/swipe-li.min.js

You then need to declare a dependency on the swipeLi module: angular.module('myApp', ['swipeLi']);

The Directive

<div
  swipe-li
  class="item"
  disabled=""
  intent="true"
  accept="done(item)"
  reject="skip(item)"
  main-content="'sample-content.html'"
  accept-content="'accept-content.html'"
  reject-content="'reject-content.html'"
  reset-to-content="false"
></div>

Development

  1. Install dependencies $ npm install

  2. $ gulp dev starts a simple node server and watches for changes

  3. Go to http://localhost:3000/ to see the example app

swipe-li

Related posts:

QR code
Mobify-js
jquery finger

To install using Bower
bower install swipe-li

swipe-li jQuery plugin

http://jquer.in/wp-content/uploads/2014/09/swipe-li.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever