我对 jquery swiperight 和 swipeleft 手势有疑问。
我有两个幻灯片,第一个是 Bootstrap Carousel,第二个是灵感来自 w3school .
我在此页面的某处找到了适用于 Bootstrap 的良好解决方案。这是代码。它工作完美。
$(document).ready(function() {
$(".carousel").swiperight(function() {
$(this).carousel('prev');
});
$(".carousel").swipeleft(function() {
$(this).carousel('next');
});
});
但如果我希望此代码包含并修改为来自 w3school 的代码它不会工作。所以我尝试了这样的事情(它在 codepen 中不起作用,我不知道为什么......)
$(function(){
$( ".news-slide-content-img" ).on( "swipeleft", swipeleftHandler );
$( ".news-slide-content-img" ).on( "swiperight", swiperightHandler );
function swipeleftHandler( ){
plusSlides(1).css('display', 'block');
}
function swiperightHandler( ){
plusSlides(-1).css('display', 'none');
}
});
如果我滑动它,它会滑动多张图片。
有什么办法可以解决这个手势问题吗?
这里是 codepen
最佳答案
这只是 jquery 版本的问题。使用函数文档 swipeleft和 swiperight ,这些版本的 jquery 解决了这个问题:
src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
但是,您在函数 swipeleftHandler
和 swipeleftHandler
中也有错字;你可以考虑这些改变:
function swipeleftHandler( ){
plusSlides(1);
}
function swiperightHandler( ){
plusSlides(-1);
}
你可以看看这个工作片段:https://codepen.io/edkeveked/pen/ypyJJX
关于javascript - 来自 w3school 的幻灯片向右滑动和向左滑动手势,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47789210/