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

이전, 다음 버튼 기능 슬라이더 페이징 기능 슬라이드시 이미지 텍스트에 에니메이션 효과 js 파일에서 반복, 페이징 클릭 등 옵션 조절이 가능합니다.

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

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

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

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

* jQuery Hero Slider Plugin 슬라이드 전환시 효과가 재미있는 jQuery 플러그인 슬라이드시의 움직임은 data-transform = "scale" 로 data-transform = "rotate" 를 조합 해 지정할 형태로되어있어 내비게이션 및 자동 재생의 유무,속도 조정 등의 옵션도 갖추어져 있습니다. * License MIT License * 이용방법 상단에 css 파일을 호출합니다 아래와 같이 마크업 영역안에 배너를 삽입합니다 그리고 하단에 js 파일을 불러옵니다 아래와 같은 옵션으로 슬라이드 방향을 결정할 수 도 있습니다 옵션 항목은 아래와 같습니다 1) activate : 클래스를 실행 bp-hs_inner__item하고 추가하여 is-active클래스를 표시 , 기본값으..

시작값과, 종료값을 입력받기 위한 용도로 사용할 데가 많을것 같습니다. 기본 데모는 아래의 링크를 통해서 확인이 가능합니다. http://ionden.com/a/plugins/ion.rangeSlider/demo.html 스킨도 몇가지 제공을 해주네요. 약간 용도를 바꾼 예제들은 http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html 날짜나 시간을 입력받기 용도로도 사용이 가능하네요. 사용자가 인터렉티브하게 사용하는 예제는 http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html 위 링크를 통해서 가능합니다. 사용된 예제처럼 이용하기 위해서 어떤 스크립트를 작성해야 하는지를 페이지에서 ..