Hammer.js - slide element slowly (carousel effect) on swipe/drag right or left

Question

I'm developing a mobile app using cordova 3.0 for Android. I have a list of element in a wrapper div:

<div id='list_wrapper'>
    <ul class="table-view">
        <li id="listItem1"> 
        </li>
        <li id="listItem2">
        </li>
    </ul>
    <!-- ... -- >
</div>

now I'd like to move this list_wrapper slowly when user drag left o right to change view with another element, so to create a slide effect.

I'm talking abount something like this:

At this moment I succeeded in doing it only on swipe and it's not what I want because on swipe the view is changed once all in block. This is what I did:

var hammer_options = {
    drag_block_horizontal: true,
    dragLockToAxis: true,
    preventDefault: true
};
var hammertime = $('#list_wrapper').hammer(hammer_options);

var leftSwipeHandler = function() {
    console.log("swipeleft");
    // ...
};
var rightSwipeHandler = function() {
    console.log("swiperight");
    // ...
};
hammertime.on("swipeleft", leftSwipeHandler);
hammertime.on("swiperight", rightSwipeHandler);

Besides I don't like this swipe solution very much because the swipe does not work well for me (I tested the swipe on chromium and firefox running my app on ripple emulate).

Any advice? Thanks

Answer 1

try code like this:

hammer = new Hammer(backgroundElement)
hammer.on('panright panleft', function(event){

console.log(event.deltaX);

backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)';

});

I advice you not use jQuery because she make your app run slowly in mobile browsers, try use better tools, especially when you animating elements. And never move elements with their left or top, use transforms! :)

Answer 2

maybe you will have a look on this example-site: http://mv-sb.de/de/

the news at the bottom will have a pan/slide effect.

i am using hammerJS 2 and jquery 1.10

i was inspired by http://www.sitepoint.com/jquery-plugin-for-touch-swiping-part-1-of-2/

my code looks like this:

$(document).on("pagecreate", function () {

            var news = $('#target div.news');
            var t = $('#target');
            var lastLeft = 0;
            var i = 0;
            var b = true;
            var j = 0;


            $('#target').hammer({domEvents: false}).on("panleft panright panend", function(e){
                console.log(lastLeft);

                if(b === false){
                    return;
                }else if(lastLeft == 0 && e.type == 'panright'){
                    //$(this).parent().css('border-left-color', '#BB131D');
                    return;
                }else if(Math.abs(lastLeft)+100 >= (news.width()/t.width())*100 && e.type == 'panleft'){
                    return;
                }

                var w = Math.abs(t.width());
                var absolut = Math.abs(e.gesture.deltaX);
                var p = (absolut/w)*100;

                switch(e.type) {
                    case "panleft":
                        news.css('left', (-(p) + lastLeft) +'%');
                        break;

                    case "panright":
                        news.css('left', (p + lastLeft) +'%');
                        break;
                }


                if(p > 30){
                    b = false;

                    $(this).data('hammer').stop(true);

                    switch(e.type) {
                        case "panleft":
                            i++;
                            break;

                        case "panright":
                            i--;
                            break;
                    }
                    news.animate({left: -i*100+'%'}, 400, function(){
                        b = true;
                        lastLeft = (parseFloat(news.css('left'))/w)*100;
                    });

                }else if(e.type == 'panend'){
                    news.animate({left: lastLeft+'%'}, 200);
                }

            });
        });