Adding touch screen to a Carousel?


I have created a carousel here:

But it’s not working with touch swipe on touch screens.
Is there any way I can modify the code, so that it support touch screen?


You should probably little bit modify your code and create separate function for navigation so arrow click and swipe call that same function depending on which arrow did you click or swipe direction.

This solution should work for swipe:

function carouselSwipe() {
var startx = 0;
var dist = 0;
var i = 0;

    var elem = $('.slide');
        while (i < elem.length) {
            elem[i].addEventListener('touchstart', function (e) {
                var touchobj = e.changedTouches[0];
                startx = parseInt(touchobj.clientX);
            }, false);
            elem[i].addEventListener('touchmove', function (e) {
                var touchobj = e.changedTouches[0];
                dist = parseInt(touchobj.clientX) - startx;
            }, false);
            elem[i].addEventListener('touchend', function (e) {
                if (dist > 50) {
                   if swipe goes from left to right call function move(left)
                } else if (dist < -50) {
                   If swipe goes from right to left call function move(right)
                dist = 0;
            }, false);
        i = 0;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.