flipsnap.js

show code

Flipsnap('.flipsnap');

show code

Flipsnap('.flipsnap');

show code

Flipsnap('.flipsnap', {
    distance: 230
});

show code

Flipsnap('.flipsnap', {
    distance: 160, // 80px * 2
    maxPoint: 3    // move able 3 times
});

show code

Flipsnap('.flipsnap', {
    distance: 230,
    transitionDuration: 1000
});

show code

var $pointer = $('.pointer span');
var flipsnap = Flipsnap('.flipsnap', {
    distance: 230
});
flipsnap.element.addEventListener('fspointmove', function() {
    $pointer.filter('.current').removeClass('current');
    $pointer.eq(flipsnap.currentPoint).addClass('current');
}, false);

show code

var $flipsnap = $('.flipsnap');
var distance = 230;
var padding = 30;
var flipsnap = Flipsnap(".flipsnap", {
    distance: distance
});
var width = distance + padding;

// append new item
$(".add").click(function() {
    var newNumber = $flipsnap.find(".item").size() + 1;
    var $item = $("<div>").addClass("item").text(newNumber);
    width += distance;
    $flipsnap.append($item).width(width);
    flipsnap.refresh();
});

// remove last item
$(".remove").click(function() {
    var $items = $flipsnap.find(".item");
    if ($items.size() <= 1) return;
    width -= distance;
    $items.last().remove().width(width);
    flipsnap.refresh();
});

show code

Flipsnap('.flipsnap', {
    distance: 230
});

var $a = $('.item a');
// click event
$a.eq(1).click(function(e) {
    e.preventDefault();
    alert("clicked");
});

// click event and link
$a.eq(2).click(function(e) {
    alert("clicked and link to index");
});

show code

var flipsnap = Flipsnap('.flipsnap', {
    distance: 230
});
var $next = $('.next').click(function() {
    flipsnap.toNext();
});
var $prev = $('.prev').click(function() {
    flipsnap.toPrev();
});
flipsnap.element.addEventListener('fspointmove', function() {
    $next.attr('disabled', !flipsnap.hasNext());
    $prev.attr('disabled', !flipsnap.hasPrev());
}, false);

show code

var flipsnap = Flipsnap('.flipsnap', {
    distance: 230
});
var $num = $('input.num');
$('button.go').click(function() {
    flipsnap.moveToPoint($num.val() - 1);
});

show code

var flipsnap = Flipsnap('.flipsnap', {
    distance: 230,
    disableTouch: true
});

// disable check
$('.isDisable').change(function() {
    flipsnap.disableTouch = $(this).is(':checked');
});

// Go btn
var $num = $('input.num');
$('button.go').click(function() {
    flipsnap.moveToPoint($num.val() - 1);
});

// next, prev btn
var $next = $('.next').click(function() {
    flipsnap.toNext();
});
var $prev = $('.prev').click(function() {
    flipsnap.toPrev();
});
flipsnap.element.addEventListener('fspointmove', function() {
    $next.attr('disabled', !flipsnap.hasNext());
    $prev.attr('disabled', !flipsnap.hasPrev());
}, false);

show code

var $demo = $('#demo-touchevents');
var $event = $demo.find('.event span');
var $detail = $demo.find('.detail');
var flipsnap = Flipsnap('#demo-touchevents .flipsnap', {
    distance: 230
});
flipsnap.element.addEventListener('fstouchstart', function(ev) {
    $event.text('fstouchstart');
}, false);

flipsnap.element.addEventListener('fstouchmove', function(ev) {
    $event.text('fstouchmove');
    $detail.text(JSON.stringify({
        delta: ev.delta,
        direction: ev.direction
    }, null, 2));
}, false);

flipsnap.element.addEventListener('fstouchend', function(ev) {
    $event.text('fstouchend');
    $detail.text(JSON.stringify({
        moved: ev.moved,
        originalPoint: ev.originalPoint,
        newPoint: ev.newPoint,
        cancelled: ev.cancelled
    }, null, 2));
}, false);

show code

flipsnap.element.addEventListener('fstouchmove', function(ev) {
    // if touchmove to prev, when touchmove event cancel
    if (ev.direction === -1) {
        ev.preventDefault();
        flipsnap.moveToPoint(ev.newPoint);
    }
});