This is an update to the Replicating touch swipe gesture javascript implementation series that I have been writing for some time now and this time I have tried out the auto scrolling feature. Sometimes users may want a auto scrolling along with the normal swipe gesture feature. This post will talk about it and the changes to code that were made to make it auto scroll. First let’s check out the demo, the demo runs in both computer webkit browsers and mobile webkit browsers. For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/09/29/replicating-the-iphone-swipe-gesture-auto-scrolling-feature/

1. Replicating the iPhone Swipe Gesture
– auto scrolling feature
For the full post visit this link: http://jbkflex.wordpress.com/2012/09/29/replicating-the-iphone-
swipe-gesture-auto-scrolling-feature/
This is an update to the Replicating touch swipe gesture javascript implementation
series that I have been writing for some time now and this time I have tried out the auto
scrolling feature. Sometimes users may want a auto scrolling along with the normal
swipe gesture feature. This post will talk about it and the changes to code that were
made to make it auto scroll. First let’s check out the demo, the demo runs in both
computer webkit browsers and mobile webkit browsers.
Demo link: http://rialab.jbk404.site50.net/swipegesture/auto_scrolling/
Now, let’s talk on the implementation,
First the features of this demo-
• Auto scrolling – the gallery slides change automatically at periodical times.
Based on the requirement specify whether auto scroll stops on user interaction or
continues.
• Looping – the gallery loops and is circular.
• Direction – supports two direction – left or right. Specify which direction the
gallery should auto scroll.
• Click/Tap to URL – click or tap to open URL’s.
• Swipe gesture – and then the touch based swipe gesture for mobiles is
available as well.
Code implementation
I will quickly walk through the changes that I have made to the code. I have picked up
the code from my last post, so this code is the looping/circular gallery code and I have
built on top of it. Let’s start.
Firstly, I have introduced some customization variables at the top of the script as shown
below,
intervalObj:null,

2. autoInterval:3, //1-1000ms, 2-2000ms , customize as per your need
autoPlay:true,
autoDirection:"l", //l- left, r-right
pauseAutoPlayOnInteraction:true,
The variable names itself reveal their purpose and should be fairly easy for you to
understand. But nevertheless let me start with the first one. intervalObj is the instance
of the timer that I have used. I will talk about it later. autoInterval is the time interval
between slide movement. I have comments against it, so should be self explanatory.
Then I have autoPlay which determines whether the gallery should auto play when it
loads. autoDirection specifies the direction of scroll. Only two have been possible for
me till now. And then we have pauseAutoPlayOnInteraction which specifies
whether we should stop the auto play when a user interacts with the gallery. A value of
false for it does the opposite.
Now let’s see what other changes have been made. I have introduced a function that
does the implementation logic.
auto: function() {
if(swipey.autoPlay)
{
if(swipey.autoDirection)
{
switch(swipey.autoDirection)
{

3. case "l":
swipey.intervalObj = setInterval(function(){
swipey.moveLeft();
},swipey.autoInterval*1000);
break;
case "r":
swipey.intervalObj = setInterval(function(){
swipey.moveRight();
},swipey.autoInterval*1000);
break;
}
}
}
},
Note that the format that I have been using for writing my script follows the json object
format where I have all my logic inside a custom object, mainly to prevent conflicting
with other objects. You can see my previous post to find out more. Now coming back to
the function, the logic implemented is very simple. I first check if autoPlay is true, and
then check if autoDirection is defined and then based on the direction I create a time

4. interval which calls the moveLeft() or the moveRight() functions periodically. This keeps
on moving the slides. The script could have been written a little better than what I have.
I will try to update when I refine it. But anyways, you can refine and use it.
Finally I have one more change. I have one more feature that I have talked of earlier in
this post. So, you can set whether to stop the auto play after user interacts. I did
introduce a variable for that - pauseAutoPlayOnInteraction . If this is set to true then
when the user interacts with the image gallery it stops the autoplay. So this is
implemented in the startHandler() event handler method. The following lines take
care of it.
if(swipey.pauseAutoPlayOnInteraction)
{
clearInterval(swipey.intervalObj);
swipey.intervalObj = 0;
}
This is it, these many changes are enough to make the already swipeable gallery auto-
play. I will definitely appreciate any suggestion for the implementation.
And here is where you can start with the swipe gesture series and
begin: http://jbkflex.wordpress.com/2012/01/09/replicating-the-swipe-gesture-iphone-
gallery-for-mobile-web-html5-part-1/
I will soon post the code in my Google code SVN base.
Updates/Related posts
1) Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the
images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would
notice it. Test case – swipe the images to the left and you would notice a black flicker on
the right side of the browser for a brief moment. This is happening when you swipe all

5. the image for the first time. Second time on wards it is not being seen. Finally I could
solve the issue and made a small post on it with the new fixed demo. You can find
it here.
2) Images linked to URL - Now you can click or tap on the images to go to a URL. I
have made a new post which describes the changes made. This was requested by one
of the reader. I felt the importance of having the ability to link the images to URL so
came up with an extension of this post. You can fine the post here. There is a demo and
also a download link.
3) Common code and example for mobiles and computer browsers - I have
developed a common universal code for mobile browsers and computer browsers. Note
that when I am saying browsers I mean web-kit browsers – Chrome & Safari in
computers, and then the default web browsers in iOS and Android mobiles. The major
changes are in the javascript code, where I have automated the user event handling
process. What this means is that for mobile devices touch based events are registered
and listened to and then for computer browsers mouse based events are registered and
handled by the script automatically. This way there is no need to hard code touch
events for mobiles and mouse events for computers. The same code works everywhere.
Find the post here. There is a demo and also a download link.
4) Circular swipe gesture gallery – I have a new tutorial where I have talked about
a circular swipeable gallery. So the images keep on looping. The tutorial also includes a
new demo. Read it here.