Question

我遇到了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

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

从w3school

1 个答案: