モバイルでカルーセルのスワイプアクションを行うにはどうすればいいですか？

Question

私のウェブサイトにはツイッターフィードのカルーセルがあります。 3つのスライド/つぶやきをカルーセルドットでナビゲートできるようになりました。

スワイプ機能を追加する必要があります。モバイルでは、左から右にスワイプしてツイートを参照できます。解決策と多くの答えを探してみると、プラグインが提案されます。私のtwitterフィードはiframe内にあるので、カルーセルプラグインでコンテンツを初期化しようとすると問題があることが判明しています。

私はW3のバニラのJavaScriptカルーセルを使っています。

しかし、私は私が持っているコードで動作するスワイプ機能をどのように得ることができるのか分かりません。

var slideIndex = 1; 
showSlides(slideIndex); 
function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.left = "-100%"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.left = "20px"; 
    dots[slideIndex-1].className += " active"; 
} 

Answer 1

私が高速で起動したい場合は、iScrollを使用します。しかし、あなたはおそらくそれを聞いたことがあります（それは非常に強固な選択肢です）。

バニラの方法では、プレーヤの要素を変換するプレーンなJavaScriptのタッチイベントリスナー+関数を使用しています。具体的には、touchStart touchMoveとtouchEndの関数を記述します。あなたがモバイルにいるかどうかを特定し、この方法で（デスクトップの場合ではなく）イベントを切り替える必要があります。