如何在移动设备上为旋转木马做滑动动作

我的网站上有一个Twitter动态旋转木马。得到它，所以你可以通过传送带点浏览3张幻灯片/推文。如何在移动设备上为旋转木马做滑动动作

我需要添加一个滑动功能，所以当在手机上我可以从左到右滑动我的手指浏览推文。试图寻找解决方案，大多数答案导致建议一个插件。由于我的twitter feed位于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"; 
}

来源

2017-10-17 Lewis Carville

如果我想快速跑起来，我使用iScroll。但你可能听说过一个（这是一个非常稳固的选择）。

香草方式是使用普通的javascript touch事件监听器+函数来翻译你的幻灯片元素。具体来说，你可以为touchStart touchMove和touchEnd编写函数。您需要确定您是否在移动设备上并切换事件以这种方式工作（而不是在桌面上）。

来源

2017-10-17 16:39:36 mat

如何在移动设备上为旋转木马做滑动动作

回答

相关问题