w3school에서 슬라이드 쇼용 스 와이프 라이트 및 스 와이프 제스처

Question

jquery swiperight 및 swipeleft 제스처에 문제가 있습니다.

두 개의 슬라이드 쇼가 있습니다. 첫 번째는 부트 스트랩 회전식 슬라이드이고 두 번째 슬라이드는 w3school에서 가져온 것입니다.

(codepen)

나는이 페이지에 어딘가에 부트 스트랩에 대한 좋은 해결책을 찾아 냈다. 여기에 코드가 있습니다. 그것은 완벽하게 작동합니다.

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

하지만 포함 modificate가 작동하지 않습니다 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'); 
      } 
     }); 

이런 식으로 뭔가를 시도했다.

어떤 아이디어가이 제스처 문제를 해결할 수 있습니까?

여기 jQuery를 버전의 문제입니다 codepen

Answer 1

입니다. 기능 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); 
    } 

당신은이 작업 조각을 살펴 수 있습니다 : -> '<링크 확인해 = "스타일 시트"href가 당신의 codepen 잘 먼저 https://codepen.io/edkeveked/pen/ypyJJX