End of slides callback

[merzikain]

I'm using this for a news slider for tablets. We have around 90 news posts and display a set of 9 per page. We're also using a responsive design for the site so I'm trying to keep within the per page limit to stay consistent across platforms.

What I would like is to have a callback that triggers whenever someone attempts to drag the list beyond the outer limits. Kind of like how in the iPhone Facebook and Twitter apps you can drag the page down from the top and it will initiate a refresh.

I'm wanting a callback to do something similar to that only what I would do is use the callback to initiate an ajax call to load the next nine news items and append them to the list.

I'm figuring I'd have to apply Swipe afterward as well.

In any case, does something like that already exist or is there any possibility of it being added?

[merzikain]

After experimenting a bit I found one part of my solution in the existing code and modified the code a little to implement the other part.

First, I am using transitionEnd to set a function to test the index against a global current index variable. If they're the same and not 0 and the current index is equal to the number of "slides" I trigger the ajax to load the next set of news items.

I also reassign the swipe function to include the new set and set startSlide to the current index + 1 to display the newest set of loaded news items.

The second part of the issue was that I wanted to display a little loading box/animation beside the last slide while the ajax is loading the new items, just to give the users feedback that something is happening. I wanted this to happen as the user is attempting to swipe past the last slide and not after the attempt fails (since it's currently the last slide).

To allow for this I added the following at line 36 of swipe.js:
options.pastSlideEnd = options.pastSlideEnd !== undefined ? options.pastSlideEnd : false;

Couldn't think of a better descriptive name for it so that'll do for now.

I then added the following at line 290 and 291:
// if user attempts to slide past end of slides
if(index == slides.length - 1 && delta.x < 0 && options.pastSlideEnd != false) offloadFn(options.pastSlideEnd);

Then all I had to do was add the pastSlideEnd parameter and pass along the function I want to execute when the user attempts to swipe past the end of the slides. I only want it to execute once so I setup another global variable to track if it is has been triggered or not.

I'm sure there are other uses for something like this beyond my special case and maybe even a better way of accomplishing the same thing. But for now this seems to do the trick.

[ronilan]

I've had the same need and done the same implementation in the past. Just pushed this on a fork: https://github.com/ronilan/Swipe It also has some other things that may be useful for tablets.

P.S - Couldn't think of a better descriptive name for it - so I used yours... (pastSlideEnd, pastSlideStart) :)