Swiperight and gesture wipes for w3school slide shows

Question

I have a problem with jQuery swiperight and gesture gestures.

I have two slide shows, the first of which is Bootstrap Carousel, and the second is w3school inspiration.

(codepen)

I found a good solution for Bootstrap somewhere on this page. Here is the code. It works great.

$(document).ready(function() { $(".carousel").swiperight(function() { $(this).carousel('prev'); }); $(".carousel").swipeleft(function() { $(this).carousel('next'); }); }); 

but if I want this code to include and modify the code from w3school , this will not work. So I tried something like this (it won’t work in codefen, I don’t know why ..)

 $(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'); } }); 

If I spent it, he spent more images than one.

Any ideas how to solve this gesture problem?

Here is the codepen

Answer 1

This is just a jquery version question. Using the documentation of the swipeleft and swiperight functions , these versions of jquery solve the problem:

 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> 

However, you also have a typo in the swipeleftHandler and swipeleftHandler ; You can consider these changes:

 function swipeleftHandler( ){ plusSlides(1); } function swiperightHandler( ){ plusSlides(-1); } 

You can see this working snippet: https://codepen.io/edkeveked/pen/ypyJJX