웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Fullscreen drag-slider with parallax 드래그로 넘기는 풀 스크린 슬라이더 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] Fullscreen drag-slider with parallax 드래그로 넘기는 풀 스크린 슬라이더

해피CGI윤실장 2021. 1. 7. 09:08

 자바스크립트와 css를 이용하여 제작된 풀스크린 슬라이더입니다.

페이저와 마우스 드래그를 통해 슬라이드를 넘길수 있습니다.

HTML을 통해 슬라이드 갯수를 조정할 수 있고. CSS를통해 배경이미지, 오버레이된 빗금 도형의 색깔 등을 변경 가능합니다.

Javascript로는 애니메이션과 관련된 속성들을 변경할수 있습니다.

풀스크린 홈페이지를 제작시 유용하게 쓰일만한 슬라이더 입니다.

 

 



자바스크립트의 autoSlideDelay 부분 숫자를 조정해 각각의 슬라이드가 보여지는 시간을 설정할 수 있습니다. 6000은 6초입니다.

 

 

 

 

 

홈페이지바로가기

저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] 상단 고정 스크롤 진행 표시줄 Jquery 플러그인  (0) 2021.01.12
[해피CGI][cgimall] 텍스트의 차이점 비교 JQuery 플러그인  (0) 2021.01.11
[해피CGI][cgimall] 마우스오버 이벤트 슬라이등 패널 자바스크립트  (0) 2021.01.06
[해피CGI][cgimall] 자바스크립트로 제작된 아코디언 메뉴 Accordion Tab  (0) 2021.01.04
[해피CGI][cgimall] Full-Screen Navigation 전체화면 메뉴  (0) 2020.12.28
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments