5

I have a problem with jquery swiperight and swipeleft gestures.

I have two slideshows, first one is Bootstrap Carousel and second one is inspiration from w3school.

(codepen)

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

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

but if I want this code include and modificate to code from w3school it won't work. So I tried something like this (It won't work in codepen 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 swipe it it swipe more images than one.

Any ideas how to solve this gesture problem?

Here is codepen

liop7410
  • 135
  • 1
  • 6
  • well firstly in your codepen add this to `HTML` --> `` at the top, that works perfectly. – Ylama Dec 13 '17 at 09:14
  • I think you just have to wait for the `JS` to load maybe because it looks like its working. – Ylama Dec 13 '17 at 09:20
  • Thanks for answer but I don't want include w3.css and i don't why I should include that. Css and js (from w3school) is not problem. Problem is with jquery swipe gesture. It works bad with that code, or gesture works for you? @Ylama – liop7410 Dec 13 '17 at 09:34
  • No i understood wrong and couldnt remove my comment , i see now the swipe is not working.. – Ylama Dec 13 '17 at 09:40
  • It is a matter of jquery version. Consider my answer to the question – edkeveked Dec 13 '17 at 11:38

1 Answers1

1

It is just a matter of jquery version. Using the documentation of the function swipeleft and swiperight, these versions of jquery solve the issue:

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 function swipeleftHandler and swipeleftHandler; you can consider these changes:

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

You can have a look at this working snippet : https://codepen.io/edkeveked/pen/ypyJJX

edkeveked
  • 17,989
  • 10
  • 55
  • 93
  • 1
    Thank you. In my project I just edited function and finally it's working great. And in codepen was problem with jquery version, how you said. Thank you once again:) – liop7410 Dec 13 '17 at 11:52