#sly#sly.min.js #터치슬라이드#스와이프
다운로드
https://darsa.in/sly/#!download
https://github.com/darsain/sly
https://github.com/darsain/sly" style="height: 252px;">https://github.com/darsain/sly
sly.min.js 파일로 제공됩니다. 용량은 19KB
슬라이드 스크립트 중에 최소 용량일 듯 합니다.
이런 걸 한번 구현해볼텐데요..ㅠㅠ
(그동안 포스팅…#sly#sly.min.js #터치슬라이드#스와이프
다운로드
https://darsa.in/sly/#!download
https://github.com/darsain/sly
https://github.com/darsain/sly" style="height: 252px;">https://github.com/darsain/sly
sly.min.js 파일로 제공됩니다. 용량은 19KB
슬라이드 스크립트 중에 최소 용량일 듯 합니다.
이런 걸 한번 구현해볼텐데요..ㅠㅠ
(그동안 포스팅했던 글을 찾아보니 몇년동안
여러가지 터치슬라이드 비교해보고 했던거 같은데;;
아직 정착을 하지 못했나보네요)
지난 주부터 주말동안 여러개 찾기만 찾고 아직 마크업 자체는 안해보다가 드디어 이 글 쓰면서 해봅니다.;;
마크업 예제
https://github.com/darsain/sly/blob/master/docs/Markup.md
https://gist.github.com/makerj/b44d1321fa084fc16f08d98931b0aef3
FRAME > SLIDEE 구조로 짜야합니다.
<div class="frame">
<ul class="slidee">
<li></li> // Item
<li></li> // Item
<li></li> // Item
</ul>
</div>
옵션
https://github.com/darsain/sly/blob/master/docs/Options.md
https://github.com/darsain/sly/blob/master/docs/Options.md" style="height: 252px;">https://github.com/darsain/sly/blob/master/docs/Options.md
calling
https://github.com/darsain/sly/blob/master/docs/Calling.md
https://github.com/darsain/sly/blob/master/docs/Calling.md" style="height: 252px;">https://github.com/darsain/sly/blob/master/docs/Calling.md
데모
https://darsa.in/sly/examples/horizontal.html
https://darsa.in/sly/examples/horizontal.html" style="height: 151px;">https://darsa.in/sly/examples/horizontal.html
https://jsfiddle.net/eond/a8zec3j2/8/
https://jsfiddle.net/eond/a8zec3j2/8/" style="height: 464px;">https://jsfiddle.net/eond/a8zec3j2/8/
sly startAt
처음 시작되는 li 선택하는 옵션
매뉴얼
https://github.com/darsain/sly/blob/master/docs/Methods.md
https://github.com/darsain/sly/blob/master/docs/Methods.md" style="height: 252px;">https://github.com/darsain/sly/blob/master/docs/Methods.md
#터치슬라이드메뉴#모바일터치슬라이드#모바일메뉴#터치슬라이드
제일 많이 쓰이는게, idangerus swiper입니다.
모바일 메뉴 구현은 터치슬라이드 라이브러리를 사용한다.
정리를 해보면 1,2,3의 방법 정도로 축소되는데...
swiperjs를 사용하는 방법이 가장 간편해보인다.;;
?번은 거리별? 방향별? 직접 터치 이벤트를 만들어줘야하고.
9번은 모바일에서만 지원된다. (__);
1) swiper.js (138KB)
2) sly (19KB)
3) slick (42KB)
4) ow…#터치슬라이드메뉴#모바일터치슬라이드#모바일메뉴#터치슬라이드
제일 많이 쓰이는게, idangerus swiper입니다.
모바일 메뉴 구현은 터치슬라이드 라이브러리를 사용한다.
정리를 해보면 1,2,3의 방법 정도로 축소되는데...
swiperjs를 사용하는 방법이 가장 간편해보인다.;;
?번은 거리별? 방향별? 직접 터치 이벤트를 만들어줘야하고.
9번은 모바일에서만 지원된다. (__);
1) swiper.js (138KB)
2) sly (19KB)
3) slick (42KB)
4) owl.carousel
개인적으로는 이 4개가 가장 쓸만한듯 합니다.
1) Swiper.js (구 idangero.us)
https://swiperjs.com/
https://github.com/nolimits4web/swiper/releases
naver 네이버 모바일 메뉴 슬라이드 스크롤(그냥저냥)
https://deorudth.tistory.com/106
https://foodchain.tistory.com/66
https://xetown.com/topics/1050810
https://swiperjs.com/get-started/
https://ux.stories.pe.kr/141
- 현재 가장 모던한 모바일 터치 슬라이더
- swipe 플러그인을 이용하여 만들어짐.
- 출처 네이버 하코사.
- 네이버 모바일 메뉴바
단 페이지를 넘기면 위 메뉴도 따라 움직여야하는데 페이지만 슬라이드로 넘어가고 메뉴는 그대로 있네요
> Centered Slides 데모를 보면 잘 되는거 같다.
2) sly (개인적으론 이거 픽!)
https://darsa.in/sly/
https://darsa.in/sly/" style="height: 431px;">https://darsa.in/sly/
https://darsa.in/sly/examples/horizontal.html
3) slick
https://kenwheeler.github.io/slick/
------------------------------------------------------------------
4) flipsnap.js - 좀더 쉽고 가벼움
https://kenwheeler.github.io/slick/" style="height: 451px;">https://kenwheeler.github.io/slick/
http://hokaccha.github.io/js-flipsnap/demo.html
5) jssor - Responsive Touch Slider / Gallery / Carousel / Banner / Slideshow html
http://www.jssor.com/
6) touchSwipe 터치슬라이드
TouchSwipe
http://labs.rampinteractive.co.uk/touchSwipe/demos/
https://m.blog.naver.com/PostView.nhn?blogId=accond&logNo=220632007381&proxyReferer=https:%2F%2Fwww.google.com%2F
좌표값을 이용해서 이벤트를 주는 방식.
7) jquery.touchSlider.js / Flick Navigation (jQuery.touchSlider, dohoons)
https://dohoons.com/test/flick/
https://github.com/dohoons/jquery.touchSlider
8) jQuery 모바일용 터치슬라이드 플러그인 Swiper 39종
https://m.blog.naver.com/PostView.nhn?blogId=arman52&logNo=221061061165&proxyReferer=https:%2F%2Fwww.google.com%2F
9) 터치 이미지 슬라이드 관련 참고 자료
https://hohoya33.tistory.com/54
10) 모바일 전용 터치슬라이드 (유진) - PC는 안됨.
https://codepen.io/retsugo/pen/JjYyKVP
https://hplayground.tistory.com/84
11) 모바일 터치 슬라이드바
https://kararico.tistory.com/54
--------------------------------
9. [X]슬라이드 메뉴 만들기
https://codepen.io/biggerbig/pen/QNayZw
10. [X]우측 슬라이드 메뉴 심플 사이드바
https://c10106.tistory.com/26
11.[X]제이쿼리를 이용해 슬라이드 메뉴 만들기
https://brilliantcoding.tistory.com/entry/Jquery-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0
12. [X] 모바일 터치 슬라이드 사이드바
https://codepen.io/soydany/pen/WqzoWZ
---------------------------------------
※기타 워크식스 - 다운로드불가
7. touchmovemenu.js
https://blog.work6.kr/290?category=786396
워크식스 쪽 스크립트는 도메인을 등록해서 사용한다. 즉 해당 코드를 소스 안에 포함시킬 수 없다.
즉 배포본으로는 사용 불가라는 뜻..
8. swipemenu.js
https://blog.work6.kr/262
워크식스는 자바스크립트 소스가 다운로드 불가입니다.
#슬라이드#터치슬라이드
이 팁은 터치슬라이드이긴 한데, 터치 이벤트 쪽에 팁이 많음..
#터치슬라이드#터치이벤트
1) jQuery 터치 슬라이드 간편용
#jquery.touchslider #jquery.event.drag
http://blog.naver.com/bigdead/220178246744
https://jsfiddle.net/eond/jp1t0r5c/1/
2) jquery 터치 슬라이드
http://stackoverflow.com/questions/4755505/how-to-recognize-to…이 팁은 터치슬라이드이긴 한데, 터치 이벤트 쪽에 팁이 많음..
#터치슬라이드#터치이벤트
1) jQuery 터치 슬라이드 간편용
#jquery.touchslider #jquery.event.drag
http://blog.naver.com/bigdead/220178246744
https://jsfiddle.net/eond/jp1t0r5c/1/
2) jquery 터치 슬라이드
http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible
3) dohoons
http://beone.tistory.com/536
4) 자바스크립트 터치&마우스 슬라이드(1차 완성) & (2차완성)
[출처] 자바스크립트 터치&마우스 슬라이드(1차 완성)|작성자 Roka
http://blog.naver.com/the602/220064835615
http://blog.naver.com/the602/220065840782
5) [JQuery] 소스정리 : 터치 슬라이드 (모바일 겸용)
[출처] [JQuery] 소스정리 : 터치 슬라이드 (모바일 겸용)|작성자 규
http://blog.naver.com/mobilism/70150817964
6) [tip] jQuery 터치 이벤트 사용시 event.touches가 undefined 일때
http://august5pm.tistory.com/30
7) 기타 - 검색 아이콘 변경(이건 왜..)
http://codepen.io/mattbraun/pen/eNwmJG
8) [jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플
http://ryuseunghyun.tistory.com/4185
9) [HTML5+CSS3]제이쿼리(jQuery)와 Swipe JS 파일을 활용한 터치슬라이드 갤러리 소스
http://ryuseunghyun.tistory.com/category/Information/html+css
touchSlide.zip
http://ryuseunghyun.tistory.com/2751
swipeGallery.zip
10) [HTML5+CSS3]모바일에서 터치, 슬라이드 모션 구현에 유용한 자바스크립트 라이브러리
http://ryuseunghyun.tistory.com/2750
Swipe-master.zip
http://swipejs.com
11) 터치해서 쓸어 넘기기를 해주는 jQuery 라이브러리
http://opencode.co.kr/bbs/board.php?bo_table=jquery_tips&wr_id=103
부트스트랩 3.0에 터치 기능을 추가하는 것에 대한 게시글
http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
1. jQuery mobile의 touch 기능 (touch lib만 빼서 쓰라는...)
2. hammer.js
고작 3k. jQuery가 없어도 동작한다는...ㄷㄷㄷ
http://eightmedia.github.io/hammer.js/
3. touch swipe plugin
http://labs.rampinteractive.co.uk/touchSwipe/demos/
설명자료
http://labs.rampinteractive.co.uk/touchSwipe/docs/symbols/%24.fn.swipe.html
Features
Detects swipes in 4 directions, "up", "down", "left" and "right"Detects pinches "in" and "out"Supports single finger or double finger touch eventsSupports click events both on the touchSwipe object and its child objectsDefinable threshold / maxTimeThreshold to determin when a gesture is actually a swipeEvents triggered for swipe "start","move","end" and "cancel"End event can be triggered either on touch release, or as soon as threshold is metAllows swiping and page scrollingDisables user input elements (Button, form, text etc) from triggering swipes12) jQuery.event.swipe
http://stephband.info/jquery.event.swipe/
http://sir.co.kr/bbs/board.php?bo_table=pg_talk&wr_id=7493
ps. 남들은 쉽게 하나만 찾으면 그걸 사용하면 되는데 저는 뭐든 다 찾아봐야 직성이 풀리나봅니다.
그래도 조금이라도 뭐가 더 낫겠지 하는 걸 찾아보는 희한한 성격이 있어서 제 스스로가 다 피곤하네요.
(정리라도 좀 잘하지! ㅠ)
