네이버 모바일 터치메뉴 구현하려고 이것저것 비교해보다가
https://eond.com/433483
1) swiper.js (138KB)
2) sly (19KB)
3) slick (42KB)
4) owl.carousel
가장 가벼운 sly.min.js를 선택해서 작업했는데,
이상하게 어떤 메뉴는 나타나고, 어떤 메뉴는 안 나타나서 찾아보니
크롬 개발자도구를 열어보니 owl.carousel과 sly.min.js가 기본 탑재되는 경우도 있고
로드 안되는 경우도 있더군요..
nariya\…네이버 모바일 터치메뉴 구현하려고 이것저것 비교해보다가
https://eond.com/433483
1) swiper.js (138KB)
2) sly (19KB)
3) slick (42KB)
4) owl.carousel
가장 가벼운 sly.min.js를 선택해서 작업했는데,
이상하게 어떤 메뉴는 나타나고, 어떤 메뉴는 안 나타나서 찾아보니
크롬 개발자도구를 열어보니 owl.carousel과 sly.min.js가 기본 탑재되는 경우도 있고
로드 안되는 경우도 있더군요..
nariya\lib\core.lib.php
nariya\lib\common.lib.php
여기 공통으로 중복으로?
// Plugin Scripts
이런 부분이 각각 정의되어있더라구요..
<script src="<?php echo G5_THEME_URL;?>/assets/js/sly.min.js"></script>따로 이렇게 추가를 해줬었는데.
저렇게 해주는게 아니라,
위 파일들의 사용법을 보니..
na_script('sly');이렇게 해주면 해당 페이지에 로드되는 구조더군요. .-_-)/;
#나리야#sly
#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
