flipsnap.js | Document

Document

Function

Flipsnap(HTMLElement|String, option)

HTMLElement or String is required. option is optinal.
String must be CSS Selector
When set string, to get first element of result. Not all element.

example

// HTMLElement
var elem = document.getElementById('foo');
var flipsnap = Flipsnap(elem);

// CSS Selector
var flipsnap = Flipsnap('#foo');

// With options
var flipsnap = Flipsnap('#foo', { distance: 240 });

Option

name	type	description
maxPoint	Number	Stop point count. default is auto calculate from element item count. demo
distance	Number	Move distance. default is auto calculate from element width and maxPont. demo
transitionDuration	Number	Transition duration (millisecond). default is 350. demo
disableTouch	Boolean	When set true, touch event is disabled. Only handling button or etc interface. default is false. demo
disable3d	Boolean	When support 3D transform browser and this option set true, it is not used 3D transform and use 2D transform. You should set true, when it is a device which has a bug in 3D transform(old Android or BlackBerry etc). default is false.

Method

refresh()

Recalculate values. demo

var flipsnap = Flipsnap('#foo');
flipsnap.refresh();

hasNext()

Return true or false. true is returned when there is next element. demo

var flipsnap = Flipsnap('#foo');
if (flipsnap.hasNext()) {
    // do something
}

hasPrev()

Return true or false. true is returned when there is previous element. demo

var flipsnap = Flipsnap('#foo');
if (flipsnap.hasPrev()) {
    // do something
}

toNext([transitionDuration])

Move to next item. demo

var flipsnap = Flipsnap('#foo');
$('.nextBtn').click(function() {
    flipsnap.toNext();
});

toPrev([transitionDuration])

Move to previous item. demo

var flipsnap = Flipsnap('#foo');
$('.prevBtn').click(function() {
    flipsnap.toPrev();
});

moveToPoint(point, [transitionDuration])

Move to item of number. demo

var flipsnap = Flipsnap('#foo');
$('.moveBtn').click(function() {
    var point = $('input.point').val();
    flipsnap.moveToPoint(point);
});

Event

fspointmove

This event is fired when point moved. demo.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fspointmove', function() {
    // do something
}, false);

// using jQuery .bind()
var flipsnap = Flipsnap('#foo');
$(flipsnap.element).bind('fspointmove', function() {
    // do something
}, false);

fstouchstart

This event is fired when touch start. demo.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchstart', function() {
    // do something
}, false);

fstouchmove

This event is fired when touch move. demo.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchmove', function(ev) {
    ev.delta;     //=> delta x value, given px
    ev.direction; //=> direction value, 1 or -1
}, false);

This event is cancelable. demo.

flipsnap.element.addEventListener('fstouchmove', function(ev) {
    if (ev.direction === -1) {
      ev.preventDefault(); // cancel touchmove event and fire touchend event.
    }
});

fstouchend

This event is fired when touch end. demo.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchend', function(ev) {
    ev.moved;         //=> is moved, true or false
    ev.originalPoint; //=> original point
    ev.newPoint;      //=> new point
    ev.cancelled;     //=> is cancelled, true or false
}, false);