Create a circular list with jQuery

问题

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?

回答1:

My approach would be to check if you slid more that the width of one li. If so, remove the first from the list, put it at the back and reset the left of the ul by the width of the li

You can do the same for the other direction.

回答2:

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.

来源：https://stackoverflow.com/questions/12843629/create-a-circular-list-with-jquery