RX/XE 팁
XE FAQ 는 제가 XE공홈 '묻고 답하기'에 답변한 내용들 중 일부를 정리한 내용입니다. (대부분이 제가 한 답변이죠)
XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠

제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요
출처 laz 
출처URL http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ 

http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

가 원본글

 

 

-----------------------------------------------

 

 

Adding swipe support to Bootstrap Carousel 3.0

With the release of bootstrap version 3, I thought it would be a good time to review my previous post on adding swipe support to bootstraps carousel and verify that everything still works as expected. After a quick wire up with a custom jQuery mobile and downloading all of the new bootstrap components I was pleased to see that nothing from my previous example was broken.

Things have changed a bit however in the year since my previous post. Newer libraries are available, different plugins, the carousel itself has some additional features such as indicators. Instead of simply updating my previous post with the new info, I thought I might delve into some of the more common questions that were asked in my previous posts and show how to do the wireups in a few of the other common touch libraries.

If you’re looking for code explanation, this post isn’t for you, refer to my previous post on this subject.

Without any further ado here are some other examples of adding swipe support to bootstraps carousel.

Adding swipe support with jQuery Mobile.

Unless you need the entire library I recommend that you build a custom version availablehere select the “touch” checkbox under events, the current minified version of that for version 1.3.2 is below (jquery.mobile.custom.min.js)

  /*! jQuery Mobile v1.3.2 | Copyright 2010, 2013 jQuery Foundation, Inc. | jquery.org/license */
  (function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function x(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function T(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=x(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function N(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function C(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function k(){g=!1}function L(){g=!0}function A(){E=0,v.length=0,m=!1,L()}function O(){k()}function M(){_(),c=setTimeout(function(){c=0,A()},e.vmouse.resetTimerDuration)}function _(){c&&(clearTimeout(c),c=0)}function D(t,n,r){var i;if(r&&r[t]||!r&&C(n.target,t))i=T(n,t),e(n.target).trigger(i);return i}function P(t){var n=e.data(t.target,s);if(!m&&(!E||E!==n)){var r=D("v"+t.type,t);r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation())}}function H(t){var n=x(t).touches,r,i;if(n&&n.length===1){r=t.target,i=N(r);if(i.hasVirtualBinding){E=w++,e.data(r,s,E),_(),O(),d=!1;var o=x(t).touches[0];h=o.pageX,p=o.pageY,D("vmouseover",t,i),D("vmousedown",t,i)}}}function B(e){if(g)return;d||D("vmousecancel",e,N(e.target)),d=!0,M()}function j(t){if(g)return;var n=x(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=N(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&D("vmousecancel",t,s),D("vmousemove",t,s),M()}function F(e){if(g)return;L();var t=N(e.target),n;D("vmouseup",e,t);if(!d){var r=D("vclick",e,t);r&&r.isDefaultPrevented()&&(n=x(e).changedTouches[0],v.push({touchID:E,x:n.clientX,y:n.clientY}),m=!0)}D("vmouseout",e,t),d=!1,M()}function I(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function q(){}function R(t){var n=t.substr(1);return{setup:function(r,s){I(this)||e.data(this,i,{});var o=e.data(this,i);o[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,P),e(this).bind(n,q),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",H).bind("touchend",F).bind("touchmove",j).bind("scroll",B))},teardown:function(r,s){--l[t],l[t]||b.unbind(n,P),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",H).unbind("touchmove",j).unbind("touchend",F).unbind("scroll",B));var o=e(this),u=e.data(this,i);u&&(u[t]=!1),o.unbind(n,q),I(this)||o.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(var U=0;U<o.length;U++)e.event.special[o[U]]=R(o[U]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,r){var i=r.type;r.type=n,e.event.dispatch.call(t,r),r.type=i}var i=e(n);e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)});var s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})}},e.event.special.tap={tapholdThreshold:750,setup:function(){var t=this,n=e(t);n.bind("vmousedown",function(r){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),s===e.target&&l(t,"tap",e)}if(r.which&&r.which!==1)return!1;var s=r.target,o=r.originalEvent,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){l(t,"taphold",e.Event("taphold",{target:s}))},e.event.special.tap.tapholdThreshold)})}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:75,start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t;return{time:(new Date).getTime(),coords:[n.pageX,n.pageY],origin:e(t.target)}},stop:function(e){var t=e.originalEvent.touches?e.originalEvent.touches[0]:e;return{time:(new Date).getTime(),coords:[t.pageX,t.pageY]}},handleSwipe:function(t,n){n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold&&t.origin.trigger("swipe").trigger(t.coords[0]>n.coords[0]?"swipeleft":"swiperight")},setup:function(){var t=this,n=e(t);n.bind(u,function(t){function o(t){if(!i)return;s=e.event.special.swipe.stop(t),Math.abs(i.coords[0]-s.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()}var i=e.event.special.swipe.start(t),s;n.bind(f,o).one(a,function(){n.unbind(f,o),i&&s&&e.event.special.swipe.handleSwipe(i,s),i=s=r})})}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe",swiperight:"swipe"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)}}})}(e,this)});

view rawgistfile1.js hosted with ❤ by GitHub

 

Include this as a separate file in your document source and then add the following script to enable touch support within carousel (note that #myCarousel should match the ID or class of the carousel you’re attempting to bind to).

 

  <script>
  $(document).ready(function() {
  $("#myCarousel").swiperight(function() {
  $(this).carousel('prev');
  });
  $("#myCarousel").swipeleft(function() {
  $(this).carousel('next');
  });
  });
  </script>

view rawgistfile1.js hosted with ❤ by GitHub


Here is a functioning demo of the jQuery Mobile example

 

Adding with TouchSwipe plugin

If you don’t want to use jQuery Mobile or are having issues with it, TouchSwipe is another jQuery option for you TouchSwipe Plugin download this and include it in your project. To wire up support for carousel add the following script. *Thanks to Eric for the slide indicator fix here.*

 

  <script>
  $(document).ready(function() {
   
  //Enable swiping...
  $(".carousel-inner").swipe( {
  //Generic swipe handler for all directions
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
  $(this).parent().carousel('prev');
  },
  swipeRight: function() {
  $(this).parent().carousel('next');
  },
  //Default is 75px, set to 0 for demo so any distance triggers swipe
  threshold:0
  });
  });
  </script>

view rawgistfile1.js hosted with ❤ by GitHub


Here is a functioning demo of the TouchSwipe example

 

Adding support with Hammer.js

Hammer.js is designed to be a straight Javascript alternative, however Bootstrap’s carousel uses jQuery so you’ll be loading that library anyway. Hammer does work with jQuery through. Grab a copy of it Hammer.js then add the following script to your page.

 

  <script>
  $(document).ready(function() {
  $('#myCarousel').hammer().on('swipeleft', function(){
  $(this).carousel('next');
  })
  $('#myCarousel').hammer().on('swiperight', function(){
  $(this).carousel('prev');
  })
  });
  </script>

view rawgistfile1.txt hosted with ❤ by GitHub


Here is a functioning demo of the Hammer example.

 

Which one should I use?

That’s easy, use the one that fits your project requirements the best. Seriously. Each and every one of these libraries is under 5k minified and gzipped (unless you’re going with the full jQuery.Mobile library). Choose the one that’s the easiest for you to work with.

How do I add swipe support for more than one carousel on a page?

Adding more swipe support for more than one slider is very simple. Change your script to include additional targets. The script below is for jQuery mobile just modify it to fit the library you need.

 

  <script>
  $(document).ready(function() {
  //add your other targets here
  $("#myCarousel, #myOtherCarousel").swiperight(function() {
  $(this).carousel('prev');
  });
  //add your other targets here
  $("#myCarousel, #myOtherCarousel").swipeleft(function() {
  $(this).carousel('next');
  });
  });
  </script>

view rawgistfile1.txt hosted with ❤ by GitHub

 

Have something to add? Feel free to leave a comment below.

전체 692건
번호 카테고리 제목 출처 등록일 조회
공지 XE 기능개선 XE 1.11.18 이후 버전의 익명 수정 버그 수정법 xetown  2023.10.07 3192
공지 XE 기능개선 XE 1.11.14 보안패치 - 타인의 쪽지 내용을 확인할 수 있는 버그 패치방법 xetown  2023.10.03 3259
공지 XE 기능개선 XE 1.11.6 이후 보안배치 #4 file rhymix  2022.07.05 3419
공지 1.11.6 XE 1.11.6 이후 보안배치 #3 rhymix  2022.04.02 3376
공지 1.11.6 XE 1.11.6 이후 보안배치 #1 xetown  2021.06.22 3770
공지 1.11.6 XE 1.11.6 이하 에서 공개댓글을 비밀댓글로 변경시 생길 수 있는 오류 수정법 sejin7940  2021.01.10 3693
공지 XE 기능개선 XE 1.11.4 이후에서 파일 업로드시 정상 작동 안 하는 현상 수정법 XE github  2019.04.02 6446
공지 XE 기능개선 php 7.1 환경에서 XE 오류 나는 경우 확인할 사항 sejin7940  2018.07.11 6360
공지 유용정보 php7.2 환경에서 XE 오류가 생기는 경우 - Object 클래스 변경 필요 XE Github  2017.11.27 9886
공지 XE 기능개선 XE 1.8.30 이하에서 반드시 수정해주셔야하는 부분입니다. XE 1.8.31  2017.02.26 7152
공지 1.8.18 XE 1.8.18 에서 사용시 반드시 수정해야할 사항들 ( XE 1.8.20 이후에서는 수정 불필요 ) xetown  2016.04.03 26273
공지 XE 기능개선 XE 1.8.12 이후부터 proc controller 일부가 작동 안 할 경우 확인할 부분 [1] XE  2015.10.16 26103
692 라이믹스 게시판 검색어가 40자로 제한되어있음. 이를 늘리려면 sejin7940  2024.10.25 7
691 라이믹스 라이믹스에서 글 복사, 이동, 휴지통 이동, 삭제 등시 쪽지 발송 안 되도록 sejin7940  2024.10.25 8
690 유용정보 "스팸방지 CAPTCHA 서버와 통신하는 도중 오류가 발생했습니다." 라는 에러가 뜨는 경우 sejin7940  2024.10.14 14
689 XE 기능개선 XE 1.8.3 미만에서 우리메일 ( ggmailing ) 연결방법 XE  2024.07.06 46
688 XE 기능개선 스케치북에서 임시저장 후 불러오기시 상태(공개,비밀글) 값이 선택 안 되는 현상 수정법 sejin7940  2024.05.07 49
687 유용정보 웹푸시 등을 사용할 경우 알림이 24개까지 누적이 되면 더 이상 알림이 오지 않는 현상 samsung  2024.05.14 60
686 유용정보 윈도우 화면 분할 기능 끄기 위시랜  2024.05.24 67
685 유용정보 정규식으로 img 테그만 제거 its me  2024.04.13 70
684 유용정보 css, js 파일 수정 후 적용 안될 때 jurin.log  2024.05.14 71
683 유용정보 php 버전이 낮을 경우 php 서버 업데이트를 반드시 해야하는 이유 sejin7940  2024.05.13 84
682 유용정보 calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수 사용시 주의할 점 sejin7940  2024.02.12 89
681 유용정보 cdn 이 오류날때 임시 우회 방법 xetown  2024.05.03 89
680 유용정보 XE에서 대표 썸네일 및 파비콘 등록 관련하여 sejin7940  2024.05.14 89
679 XE 기능개선 글등록 후 페이지 이동되기 전에 alert 이나 특정한 행위를 하고픈 경우.. sejin7940  2024.02.04 90
678 유용정보 스케치북 스킨에서 모바일에서 view 화면에서 사진 위에서 스크롤이 안 되는 현상이 발생할때 sejin7940  2024.02.21 91
677 다른 XE자료들 출석부(attendance) 모듈에서 특정 유저들이 출석 불가능한 경우 오류 수정법 sejin7940  2021.03.17 114
676 XE FAQ 게시판에서 등록일 기준 검색은 없나요? sejin7940  2023.03.31 120
675 라이믹스 모바일에서 파일첨부 부근을 클릭해 메세지를 출력시 등록버튼이 인식이 안 되는 경우 sejin7940  2023.11.28 131
674 XE 기능개선 1588-XXXX 처럼 두자리 수의 전화번호 사용하는 경우 끝의 - 없애기 sejin7940  2023.08.18 132
673 XE 기능개선 특정서버에서 sejin7940_vote 관리 페이지 오류 나는 경우 수정법 sejin7940  2021.05.17 135
XE Login