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

index.html 파일을 웹브라우저로 열어보면 아래와 같은 데모를 확인을 해볼수 있습니다. 흑백사진으로 사람이 표시가 되고 사진을 클릭을 해보면 사진이 컬러로 변경이 됩니다. 사진 아래의 설명문구가 해당 사진에 맞는 내용으로 조절이 됩니다. 다른 사진을 선택해보면 아래의 그림 처럼 선택한 사진과, 해당 사진에 대한 설명문구로 변경이 됩니다. 사용하는 방법은 아래와 같습니다. 탭메뉴를 이용해서, 각 탭에 해당하는 컨텐츠를 표시하는 기능의 유형입니다. 회원관리, 신청자관리, 접수자관리 등등 각각의 평가를 하거나, 각각의 평가점수를 보기 위한 화면을 구성할 때에 활용을 해볼만 한 UI인 듯 하네요. 꼭 사람이 아니더라도, 사과, 바나나, 수박 등의 과일 사진이나, 강아지, 고양이, 거북이 등의 동물 등등의 ..

자바스크립트와 css를 이용하여 제작된 풀스크린 슬라이더입니다. 페이저와 마우스 드래그를 통해 슬라이드를 넘길수 있습니다. HTML을 통해 슬라이드 갯수를 조정할 수 있고. CSS를통해 배경이미지, 오버레이된 빗금 도형의 색깔 등을 변경 가능합니다. Javascript로는 애니메이션과 관련된 속성들을 변경할수 있습니다. 풀스크린 홈페이지를 제작시 유용하게 쓰일만한 슬라이더 입니다. 자바스크립트의 autoSlideDelay 부분 숫자를 조정해 각각의 슬라이드가 보여지는 시간을 설정할 수 있습니다. 6000은 6초입니다.

NiVO 슬라이더를 소개 합니다. 애니메이션 효과가 참 재미 있는 슬라이더 입니다. 사용방법 안내 드립니다. 1. 라이브러리를 호출하세요. 2. 컨텐츠를 구성하세요. 3. 플러그인을 호출 하세요. 4. 다양한 옵션과 이벤트를 걸고 싶다면 아래의 내용을 참고 하세요. 아래의 사용 가능한 effect 항목을 이용하여 다양한 방법으로 슬라이드를 표현할 수 있습니다. ( sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse )

HTML에서 둥근 범위 슬라이더를 만드는 jQuery 용 플러그인 입니다. 플러그인 "roundSlider"는 값 범위를 선택하기 위해 개발 되었습니다. 사용자 정의 가능한 원형 / 방사형 범위 슬라이더입니다. 터치, 마우스 휠 스크롤 및 키보드 화살표 키를 지원합니다. 또한 슬라이더는 순전히 CSS와 JavaScript로 빌드됩니다. 따라서 그래픽에 이미지를 사용하지 않습니다. 라이센스는 MIT 라이센스 입니다. 사용법은 아래와 같습니다. # 라이브러리를 호출 합니다. # 컨테이너를 생성 합니다. # 스크립트를 실행 합니다. $("#type").roundSlider();

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 WaltzerJS 파일을 링크합니다. 2. 슬라이드 시킬 내용들을 DIV 태그로 감싸서 추가합니다. 3. CSS 파일에 클래스를 추가하고 필요에 맞게 변경할 수 있습니다. 예) 4. WaltzerJS 플러그인을 호출합니다. 5. 옵션을 조절하거나 및 콜백 함수를 사용할 수 있습니다. 6. API 메소드 7. 이벤트 핸들러 - 작동 예제

모바일용 이미지 슬라이드 Custom scroll slider로 슬라이더바를 이용한 이동, 터치를 이용한 이동이 가능합니다. html, css, js를 이용하여 구성 및 이용이 가능하며, js내 옵션 변경을 통해서 간격 너비, 속도 제어등이 가능합니다. 또한 html 소스를 개수도 자유롭게 늘릴 수 있습니다.

다운로드 받은 파일의 압축을 해제한후 easy_slides.test.html 파일을 웹브라우져로 열어보면 샘플 확인이 가능합니다. 총 4가지의 이미지 슬라이더 유형을 지원합니다. 1. One Big Picture 2. Circle 3. 4 in line 4. Clock 장점으로는 HTML태그가 간단하게 구성되어 있습니다. 슬라이더를 작동시키는데 있어서 지정할수 있는 전체 옵션은 이며, 자바스크립트 코드 역시 사용하기에는 많이 어렵지 않게 작성되어 있네요. ​ ​ ​

페이지 섹션 사이를 전환하면서 표시기가 휠 라운드의 원 안에 이동하는 휠 슬라이더가 있는 독창적 인 한 페이지 스크롤 웹 사이트 를 만드는 jQuery / CSS 솔루션 입니다. 최신 Bootstrap 프레임 워크와 호환되며 Bootstrap의 scrollspy 구성 요소가 필요합니다. ​ ​원 페이지용 웹사이트를 제작할 때 사용하면 괜찮을 듯 합니다. 다운로드 받은 파일의 압축을 해제하고, slider-wheel.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 마우스 휠이나, 키보드 방향키를 이용해서 웹페이지의 스크롤을 위,아래로 조절을 하면 웹페이지의 배경이 스크롤에 따라서 변경이 됩니다. 중앙에 동그란 부분에 표시되는 컨텐츠가, 스크롤의 위치에 해당하는 컨텐츠로 교체가 됩니다. 동그란..

* wRunner Slider Plugin - wRunner는 슬라이더를 추가하여 값을 선택하는 플러그인입니다. 테마, 단계, 최소 및 최대 값 등을 설정할 수 있습니다. jquery 3.4.1 버전 이상 필요로 합니다 * 사용방법 - 첨부된 압축파일을 웹디렉터리에 압축해제합니다 작업될 페이지의 html 상단에 아래와 같이 제공된 css를 호출합니다 아래와 같은 요소들을 추가하여 최소값, 최대값 단일,멀티 슬라이더 옵션, 가로세로 옵션등에 대한 값확인 및 설정을 할 수 있도록 되어있습니다 그리고 문서 하단에 아래와 같은 js 파일을 호출합니다 출력되는 결과는 아래와 같습니다 검색이나, 통계와 관련된 기능들에 접목할때 해당 슬라이더바를 활용하시면 도움이 될것 같습니다

Pogo Slider 는 여러가지 액션들을 제공하는 이미지 슬라이드 기능 입니다.Jquery 기반으로 제작이 되어 있습니다. 아래 페이지에서 다양한 액션에 대한 데모 슬라이더들을 확인이 가능 합니다. http://fluice.com/pogo-slider/#demos 해당 슬라이더의 사용 방법은 http://fluice.com/pogo-slider/#usage 페이지에서 확인을 하실수가 있는데, 첨부된 압축파일을 풀어보시면 demos 폴더내에 샘플 소스들을 확인도 가능 합니다. 사용법 아래쪽에서는 제공되는 옵션들도 확인이 가능 합니다.