Improving jQuery Infinite Carousel (part two)

Just few days ago I described how to make the Infinite Carousel flexible. In this tutorial I would like to describe you how to solve some bugs introduced by the previous article (just an improvement) and how to implement the swipe event into this carousel. [adrotate banner=”8″].

Issue #1 “the truncated images count as full view images”

Each item has an exact size, in our case it is 105px x 105px. So if the wrapper of the carousel has a width multiple of 105px nothing goes wrong. But if the wrapper is bitter greater than multiple of 105px (for example 317px), the pagination break to work properly. This is because in an exact point of the script we are counting the number of contained items in the wrapper rounded by excess ( ceil function in javascript ).

So what we need to do, teorically, is just to change the used method from ceil (rounding by excess) to floor (rounding by defect) in the following instruction:

$wrapper.visible = Math.ceil($wrapper.innerWidth() / singleWidth),

This will solve all our problems.

Issue #2 “Handling the swipe”

Managing the swipe gesture is not so simple, than we could proceed in two ways.

The first is to handle the touchstart/touchend events, identify the gesture calculating the angle of movement and in dependence of it raising the exact event (swipe to left, swipe to right). How to do that?

The way i thing it would be correct to manage the swipe is:

1. handling the touchstart event to grab the first point where the touch begins
2. handling the touchmove event to grab all the points where the user is swiping
3. for each time that the touchmove event is raised, you have to calculate if all points are on the same line with tollerance. If it is not so we keep care to untrack the next movements and release all user resource.
4. reached the minimum distance and ensured that the user is swiping (the above point 3) we can raise a custom event onSwipe where you can describe the distance from the base point, the speed,   the angle the start point and the end point.

Another much simpler way to do this, is integrating the jQuery Touchwipe plugin into our pages and leave it the hard work. This plugin works almost fine but it is acceptable for our goal.

It can manage the 4 directions (left, right, up and down) we need just the left and right direction. But what do it not do?

It does not give us the speed, angle or if the gesture is exactly a swipe: you could make a wavy movement and the swipe will be raised if the X or Y distance between start point and end point will be at least the minimum defined.

So the only things we need to do are:

1. Creating just 2 new methods in the Carousel Javascript: gotoNext() and gotoPrev() just after the gotoPage() method. Is goal is to move the carousel to the next page and to the previous page.
2. Including in our pages the jQuery Touchwipe plugin
3. Attaching it to the carousel and
4. Configuring its behavior.

The gotoNext and gotoPrev methods will be simply:

function gotoNext(){
return gotoPage(currentPage+1);
};

function gotoPrev(){
return gotoPage(currentPage-1);
};

Then we have to attach the  swipe plugin to the wrapper then configure its behavior in this way:

$wrapper.touchwipe({
wipeLeft: function(){
gotoNext();
},
wipeRight: function(){
gotoPrev();
}
});

Our plugin now works with swipe and buttons on touchscreen that implements the touch events and works with navigation buttons on desktop browser and mobile device that does not support the touch (but support at least javascript :-) ).

I made a package with the full source code (css, javascript, dependencies and used html), and a working demo.

Happy coding to all!