How to make a slider scrollable on touch screens?

Question

I have a site here:

www.completefaq.com

The main page contains a slider, which I built on my own. It changes the slides automatically after 8 secs. and on a click on forward or backward button. But, the problem is that I want it to scroll even when one tries to just slide it on a touchscreen.

Any help is appreciated. I can only use CSS, JavaScript, HTML and PHP, because other APIs such as JQuery, tend to slowdown the website.

Is that link safe for work? :D Joking aside you could use http://modernizr.com/ and check if the current device has touch enabled. After that use touch events rather then your mouse events. http://www.javascriptkit.com/javatutors/touchevents.shtml — cptnk, Oct 29 '14 at 13:57
I used them and also used the click events, but they worked very weirdly and also slowed down everything. And, as I mentioned I just wanna do that with simple JavaScript, HTML, etc. I don't wanna use any other libraries, as they slow down the speed. — prakhar19, Oct 29 '14 at 17:36
you can configure modernizr and get rid of functionality you dont need. With that being said you can get the library down to 28kb which by all means wont slow your website by all that much. Additionally to your original question you could add some code as to how you use those events. You'd probably get a clearer answer then. — cptnk, Oct 30 '14 at 08:11
The total size of my website's code is just 105 KBs, and in that respect, 28 KB makes a huge difference. And, the main reason I don't wanna try big size APIs, is that, they even make the processing of website (when the website has loaded into the browser), very slow. — prakhar19, Oct 31 '14 at 12:16

score 6 · Answer 1 · edited May 23 '17 at 12:30

Since you don't want a jQuery plugin, it's going to be non trivial due to the differences between the various touch platforms, and in the end you would probably end up in reinventing the wheel trying to get the abstraction you need. Above all, your effort will clearly depend on the level of accuracy you want to achieve, so it's advisable that you don't try to make the images respond to every minimal touch event.

I believe your best bet is to use Tocca.js, a very promising, standalone script which is "super lightweight" (only 1kB) and aims to normalize touch events among existing devices.

Hammer.js is more accurate, but could be a bit heavier in your case.
QuoJS is also good but it's not focused only on touch events.

You may find this and this SO question interesting. Finally, you can always take inspiration from the several existing touch-enabled javascript image sliders.

score 3 · Accepted Answer · answered Nov 01 '14 at 14:17

Here is a very lightweight script to start with. Put this script somewhere below your div#featured, or execute it on dom ready. You may want ajust the minimum swipe time (200ms) and minimum swipe distance (50px):

var featured = document.getElementById("featured");
if( "ontouchstart" in window ) {
    var touchStart = function(evt) {
        var startTime = (new Date()).getTime();
        var startX = evt.changedTouches[0].pageX;
        var touchEnd = function(evt) {
            document.removeEventListener("touchend", touchEnd);
            var diffX = evt.changedTouches[0].pageX - startX;
            var elapsed = (new Date()).getTime() - startTime;
            console.log( "Swiped " + diffX + " pixels in " + elapsed + " milliseconds" );
            if( elapsed < 200 && Math.abs(diffX) > 50 ) {
                ( diffX < 0 ) ? slideright() : slideleft();
            }
        }
        document.addEventListener("touchend", touchEnd);
    };
    featured.addEventListener("touchstart", touchStart);
}

I understand that you want to keep your website light, but if you wan't more advanced gesture recognition that this simple swipe, you will have to go with some kind of framework.

You're welcome :-) The best would be to reset your setInterval directly from the "slideLeft" and "slideRight" functions, so it does not launch directly after someone clicks/swipes left or right. — Romain, Nov 06 '14 at 01:51

How to make a slider scrollable on touch screens?

2 Answers2