첨부파일 https://eond.com/jquery/433483

#터치슬라이드메뉴 #모바일터치슬라이드 #모바일메뉴 #터치슬라이드


제일 많이 쓰이는게, 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/examples/horizontal.html


3) slick

https://kenwheeler.github.io/slick/

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

4) flipsnap.js - 좀더 쉽고 가벼움

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
접기/펴기 | 댓글 새로고침
  • 이온디
    자, 이중에 골라서 모바일터치메뉴를 구현하면 됩니다. +_+;;
    오후 03:08
    댓글
 
 
Total 142 articles in 1 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
142 [플러그인] webticker js loop 2020/07/02 0
141 [슬라이더 플러그인] glider.js autoplay 2020/06/24 0
140 [슬라이더 플러그인] bxslider 옵션 및 참조글 2018/03/02 0
139 가로 롤링 슬라이딩 배너 2020/06/06 0
138 sly.min.js 터치슬라이드 스와이프 파일 2020/05/19 0
현재글 [슬라이더 플러그인] 네이버 모바일 터치 슬라이드 메뉴 [1] 2020/05/13 0
136 [슬라이더 플러그인] jquery slider 비교 2018/01/01 0
135 [고급활용] 스와이프, 터치슬라이드 2016/06/19 0
134 [고급활용] jQuery 터치슬라이드 터치이벤트 파일 2015/08/26 0
133 [기초활용] [jQuery] toggle, if..else , switch 2018/04/27 0
132 Smooth Scrolling 2020/05/04 0
131 메뉴 클릭했을 때 스르륵 부드럽게 열리는 하위메뉴 2020/05/04 0
130 [기초활용] jquery on toggle 2017/12/20 0
129 [플러그인] 달력 스크립트 2019/10/24 0
128 jQuery 3 Bootstrap 4 Datepicker 2019/10/25 0
127 [기타 플러그인] 비밀글 jquery 더보기 2019/10/07 0
126 [슬라이더 플러그인] 비밀글 swiper slider 2019/10/05 0
125 [플러그인] Cascading Grid Gallery 2018/12/25 0
124 [기타 플러그인] jQuery Select Custom Library 2018/09/17 0
123 [플러그인] Free jQuery image viewer Plugins 2018/08/16 0

해시태그 디렉터리