Question

I want to make a very simple function in my jQuery script. When the finger/cursor touches/clicks on the screen, I want the pages to slide horizontally following the movements of the finger/cursor. I know there is a lot of plugins created by so many people, but I really don’t need everybody else’s solutions. The image is a visual view of how my HTML looks like. it is really simple.

The jQuery sciprt is obviously not correct, but I hope it would give you an idea about the simple function I need. I don’t extra classes or fade-functions or anything.

$(document).live('touchmove' or 'mousemove', function() {
    $('div[class=page_*], div[class=page_^]').[follow movements horizontally, and auto align to nearest edge when let go.];
});

Also I want to be able to do the same with one big div, so probably the width-variable of the element moving should be equal to $(window).width();. Actually I think that would be the best idea. I can always put more content inside the big div and make it larger, so keep it with that. It should be more simple to do and to focus on one element only.

Answer 1

So, here is my solution. I’ve made some changes so that now you can have more than 3 pages.
Also, I’ve defined a variable named threshold set to the half of a page. If you want to have a threshold bigger or smaller than the hakf of the page you will have to make some more changes.

HTML CODE:

<div class="container">
    <div class="wrap">
        <div class="page page1"></div>
        <div class="page page2"></div>
        <div class="page page3"></div>
        <div class="page page4"></div>
    </div>
</div>

CSS CODE:

.container, .page, .wrap {
    width: 300px;
    height: 400px;
}
.container {
    background: #efefef;
    box-shadow: 0px 0px 10px black;
    overflow: hidden;
    position: relative;
    margin: 5px auto;
}
.wrap {
    width: 1200px;
    position: absolute;
    top: 0;
    left: 0;
}
.page {
    float: left;
    display: block;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.page1 {
    background: yellow;
}
.page2 {
    background: green;
} 
.page3 {
    background: blue;
}
.page4 {
    background: red;
}

As for the CSS code keep in mind that if you want to change the page size you will also have to change the container and wrap size.

JS CODE:

var mouseDown = false, right;
var xi, xf, leftX = 0;
var nPages = $(".page").size();
var pageSize = $(".page").width();
var threshold = pageSize/2;
var currentPage = 0;

$(".container").on("mousedown", function (e) {
    mouseDown = true;
    xi = e.pageX;
});

$(".container").on("mouseup", function (e) {
    if (mouseDown) {
        mouseDown = false;
        xf = e.pageX;
        leftX = parseInt($(".wrap").css("left").split("px")[0]);
        if ((e.pageX - xi) < -threshold || (e.pageX - xi) > threshold) {
            setFocusedPage();
        } else {
            restore();
        }
    }
});

$(".container").on("mouseleave", function (e) {
    if (mouseDown) {
        mouseDown = false;
        xf = e.pageX;
        leftX = parseInt($(".wrap").css("left").split("px")[0]);
        if ((e.pageX - xi) < -threshold || (e.pageX - xi) > threshold) {
            setFocusedPage();
        } else {
            restore();
        }
    }
});

$(".container").on("mousemove", function (e) {
    if (mouseDown) {
        $(".wrap").css({
            "left": (leftX + (e.pageX - xi))
        });
        right = ((e.pageX - xi) < 0) ? true : false;
    }
});

function restore() {
    $(".wrap").stop().animate({
        "left": -(currentPage * pageSize)
    }, 200, function () {
        leftX = parseInt($(".wrap").css("left").split("px")[0]);
    });
}

function setFocusedPage() {
    if (leftX >= (-threshold)) { // First Page
        currentPage = 0;
    } else if (leftX < (-threshold) && leftX >= (-(nPages + 1) * threshold)) { // Second to N-1 Page
        (right) ? currentPage++ : currentPage--;
    } else if (leftX < -((nPages + 1) * threshold)) { // Third Page
        currentPage = nPages - 1;
    }
    $(".wrap").stop().animate({
        "left": -(currentPage * pageSize)
    }, 200, function () {
        leftX = parseInt($(".wrap").css("left").split("px")[0]);
    });
}

Remember here that if you want a different threshold you will have to make some changes especially in the setFocusedPage() function.

Here is my last DEMO