javascript - 来自 w3school 的幻灯片向右滑动和向左滑动手势

Question

我对 jquery swiperight 和 swipeleft 手势有疑问。

我有两个幻灯片，第一个是 Bootstrap Carousel，第二个是灵感来自 w3school .

(codepen)

我在此页面的某处找到了适用于 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

Answer 1

这只是 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