タッチ機能付きスライダー

Question

簡単なスライダーを作成しました。私はデスクトップ用だけでなく、スマートフォン用にもそれを望んでいます。したがって、この場合、指を左から右に、または右から左に動かすと、スライドさせることが可能でなければなりません。今のところ、ボタンをクリックしたときにのみ機能します。

どうやって始めたらいいかわかりません。これどうやってするの？

var i = 0; 
$('.next').bind('click', function() {   
    if (i < 4) {  
     $('li').animate({'left': '-=600px'}, 300).delay(600); 
    i++; 
    } 
    console.log($('li:first').position().left); 
    console.log(i); 
}); 

$('.back').bind('click', function() { 
    if (i > 0) { 
    if ($('li:first').position().left < 0) {  
     $('li').animate({'left': '+=600px'}, 300).delay(600); 
     i--; 
    } 
    } 
    console.log(i); 
}); 

https://jsfiddle.net/6t1wx95f/11/

PS：それはプラグインを使用せずに動作するはずです。

私はあなたのフィドルを更新

Answer 1

：https://jsfiddle.net/6t1wx95f/13/（ワーキングタッチイベントを持つように応答ビューで）クロームでテスト

。クレジットはanswerになります。

基本的には、touchstartとtouchmoveイベントを使用するだけです。あなたがタッチすると、あなたは単にあなたのXの位置を取って、それをタッチ開始時の位置と比較するだけです。

touch eventsを参照してください。それはバニラのjavascriptのすべてですので、プラグインを含める必要はありません。

// Set up events 
var slider = document.getElementsByClassName('slider')[0]; 
slider.addEventListener('touchstart', handleTouchStart, false);   
slider.addEventListener('touchmove', handleTouchMove, false); 

..and

if (xDiff > 0) { 
    /* left swipe */ 
    slideRight(); 
} else { 
    /* right swipe */ 
    slideLeft(); 
}