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

Question

我在使用 jquery 向右滑动和向左滑动手势时遇到问题。

我有两个幻灯片，第一个是 Bootstrap 旋转木马，第二个是 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

Answer 1

只是jquery版本的问题。使用函数 swipeleft and 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

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

Swiperight and swipeleft gestures for slideshow from w3school

javascript

jquery

html

css

swipe-gesture