스이디: 스타트업에서 이거저거 하는 디자이너

[디알코] 슬라이더 스스로 만들어보기. 2편 본문

팁, 노하우, 알아냄/프론트 코딩

[디알코] 슬라이더 스스로 만들어보기. 2편

didQk 2019. 3. 5. 12:07

어제의 실패는 뒤로 하고


출근 후에 다시 페이지를 열어보았다.


그리고 슬라이더가 왜 안될까... 하면서 움직였더니









뭐야!! 움직이잖아!!! 


짜증과 분노가 밀어닥친다....



어젠 왜 안된거지??


화면을 모바일 사이즈로 바꿔 보았다.


그랬더니


다시 안돼..........





뭐 이래 썅...


암튼, 아예 안되는게 아니라는 것은 밝혀졌다!!!


속이 시원해진 느낌!!



개비스콘에 대한 이미지 검색결과





화면 스크린에 따라


되던게 안된다는 거는 


css 에서 화면 사이즈로 다른 처리가 됐다는거 같아서


뭐가 바뀐지 한번 살펴 보았으나






모르겠다...



input 태그에 클래스를 그냥 slider 라고만 해서 


어디 다른데 있던거랑 겹친게 있나..


움직여달라는 마음을 담아..




클래스 이름을 slider_move 로 바꿔서 다시 업로드!







후후.  이렇게 쉽게 될거란 생각은 안했다...










혹시 모바일에서 뭔가 문제가 있는건가? 싶어서


예제를 봤던 w3cschools 페이지를 모바일로 확인했더니!!



여긴 잘 되네.... 에이씨...






일단 잘 되는 거고, 내가 못한 거라는게 밝혀짐..




다시 침착하게. 천천히. 하나씩.









아예 빈 페이지에 


input 태그랑 css만 넣고 업로드했더니


이건 제대로 움직인다. 핸드폰에서는.


(컴터에서는 왜 안되지..)


어쨌든 모바일웹 만드는 거니까 폰에서 되면 되지뭐! ㅋㅋ








일단, 아무것도 없을땐 된다는건


기존에 쓰고 있는 다른 부분 때문에 안된다는거고..









html 파일 안에 넣었던 슬라이더 css 를 지우고


기존 링크었던 css 를 다시 넣어서 업로드.

( <link rel="stylesheet" ~~ > 이런거 )






스무스하게 잘 움직인다.



그럼 기존에 있던 상단 메뉴바를 넣어봐야지




잘 되네








 


그럼  상단 메뉴바 드로어 기능 스크립트 부분을 넣어봐야지



....









안된다!!!!



철컹 철컹철컹 잡았다 요놈





너 때문이었구나!!!!!!








일단.. 문제를 찾았는데..


이 드로어 스크립트 부분은 내가 못하는 레벨인데..


이거 혹 떼러 갔다가 혹 붙이고 돌아온 격인데 어쩌지.. ㅋㅋㅋ





음.. 근데 드로어 메뉴에 


dragOpen: true 


이거 때문인거 같은데.. 흠


슬라이더도 드레그해서 움직이는건데


이 코드 때문에 안되는거 같은디..



해당 부분만 지워서 업로드해보자











와.. 된다 ㅋㅋㅋㅋㅋㅋ








그러면,


html, css, script 까지 작업했던 그 코드 그거 그대로 두고


드로어 기능 스크립트 안에 있던


$menu.mmenu({

dragOpen: true,

});



이 부분을 삭제해서 업로드해보자.

















된다!!!!!!!








허탈해 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ


저거 때문에 안됐던건데  별의별 짓을 다 했네 ㅠㅠㅠㅠㅠㅠ




결론


https://www.w3schools.com/howto/howto_js_rangeslider.asp


여기 나와있는 예제를 바탕으로 아이디값만 잘 맞춰주면 잘 된다.






p.s


$menu.mmenu({

dragOpen: true,

});


이걸 지워버렸더니


드로어 메뉴가 아예 작동을 안 하더라... 


그래서 dragOpen : false 로 수정했다.


첩첩산중이구만 ㅋㅋㅋㅋㅋㅋ


Comments