Question

I’m creating a mobile version for a website and there’s a list in that I want to make it work with touch gestures (like Yahoo’s mobile version website). I’m using Swipe plugin for jQuery and everything works fine but the problem is that I want to make the news list infinite and I have not a single idea about how doing it.

The problem is that if I swipe right the first item, there will be a blank place and I can’t get back to first item, and in this also happens when I swipe left the last item.

My list is like this:

<div class="newswrapper">
    <ul>
        <li>
            <a>Title 1</a>
            <div class="image">
                <img src="dummyurl1.jpg" />
            </div>
        </li>
        <li>
            <a>Title 2</a>
            <div class="image">
                <img src="dummyurl2.jpg" />
            </div>
        </li>
        <li>
            <a>Title 3</a>
            <div class="image">
                <img src="dummyurl3.jpg" />
            </div>
        </li>
    </ul>
<div>

and my jquery code is:

$(".newswrapper ul li").swipe({
    var newsWidth = $('.newswrapper ul li:first').width();
    swipe:function(event, direction, distance, duration, fingerCount) {
        if (direction == 'left') {
            $('.newswrapper ul').animate({left : '-=' + newsWidth}, 500);
            });
        } else if (direction == 'right') {
            $('.newswrapper ul').animate({left : '+=' + newsWidth}, 500);
        }
    }
});

Any suggestions?

Answer 1

My experience with touchSwipe jQuery plugin was not successful, it works good with desktop browsers but for mobile browsers it’s too buggy.

After days of searching I found iOSSlider which is working with both browsers and mobile browsers (Both android and iDevices) and it’s what I was looking for.