목록#slider (17)

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

[해피CGI][cgimall] jQuery Hero Slider Plugin v0.1.0

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

슬라이더를 이용하여 시간을 설정하는 jQuery 플로그인입니다. - 라이센스 MIT - 사용 방법 1. 사용할 페이지 상단에 jQuery 라이브러리와 CSS 링크를 걸어줍니다. 2. 사용할 페이지 상단에 durationSlider 플러그인 파일을 링크해줍니다. 3. 설정 시간을 표시할 INPUT 태그를 추가합니다. 4. 슬라이더를 표시할 DIV 레이어를 추가합니다. 5. durationslider 플러그인을 호출하여 슬라이더를 생성합니다. 6. 시간의 출력 포멧도 설정할 수 있습니다. 7. 슬라이더의 범위(최소/최대값)와 값의 변동 단위를 변경할 수 있습니다. 8. 슬라이더를 마우스 휠로 이동할지 여부도 설정할 수 있습니다. - 결과물
웹프로그램밍 자료실/JAVA 자료 2019. 2. 28. 09:16
[해피CGI][cgimall] Automatic Accordion Slider Plugin For jQuery - Accordion.js

jquery로 제작된 accordion 을 이용한 이미지 슬라이드 입니다. 예제를 확인하는 방법은 다운로드 받은 파일의 압축을 해제한후에 accordion_example/index.html 파일을 웹브라우저로 열어서 보면 됩니다. 위 그림 처럼 이미지가 화면에 표시가 되고, 마우스가 오버되는 이미지로 슬라이드 되는 효과를 볼수 있습니다. HTML 소스코드를 이용해서 적용하는 방법도 상당히 단순해 보이네요. 1. jquery 와 Accordion.js 파일을 include 시켜줍니다. 2. div와 li , img 태그를 이용해서 이미지를 보여주는 코드를 작성합니다. 3. div 에 지정한 class 를 이용해서 작동하도록 자바스크립트를 넣어줍니다. 비교적 간단하게 이미지슬라이드를 구현할수가 있네요. 출처..
웹프로그램밍 자료실/JAVA 자료 2018. 11. 29. 09:29
[해피CGI][cgimall] 이미지 슬라이드 배너 Pure CSS3 slider

자바스크립트를 사용안하고 css 만으로 제작된 이미지 배너 슬라이드 배너위에 텍스트 직접 입력이 가능합니다 텍스트 부분과 이미지 부분 다중으로 에니메이션 효과가 있습니다 해당 사이트에서 소스 다운로드 및 소스를 확인해 보실수 있습니다. 텍스트입력 슬라이드 에니메이션 속도 조절
웹프로그램밍 자료실/기타 자료 2018. 11. 26. 09:27
[해피CGI][cgimall] Ion.Range Slider

시작값과, 종료값을 입력받기 위한 용도로 사용할 데가 많을것 같습니다. 기본 데모는 아래의 링크를 통해서 확인이 가능합니다. 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 위 링크를 통해서 가능합니다. 사용된 예제처럼 이용하기 위해서 어떤 스크립트를 작성해야 하는지를 페이지에서 ..
웹프로그램밍 자료실/JAVA 자료 2018. 4. 17. 09:10
[해피CGI][cgimall] 배너 슬라이드 소스

jquery 와 css3을 이용한 슬라이드 배너 입니다. 데모 미리보기를 누르시면 바로 확인이 가능하며 다이나믹한 효과로 눈을 사로잡는 매력적인 소스입니다. 파일은 css, images, js, html 로 나누어져있으니 마음껏 응용해보시기 바랍니다.
웹프로그램밍 자료실/JAVA 자료 2018. 3. 8. 09:18
[해피CGI][cgimall] 재미있는 3D 이미지슬라이드 StackSlider

네비게이션 버튼을 클릭하면 좌우측의 슬라이드가 점점 쌓입니다. 사이트에서 소스다운로드가 가능합니다. 익스 10이상 크롬에서 정상 작동합니다. 아래와 같은 기본 옵션을 조절이 가능합니다. // default transition speed speed : 700, // default transition easing easing : 'ease-in-out', // render both piles piles : true
웹프로그램밍 자료실/PHP 자료 2017. 11. 29. 09:01
Prev 1 2 Next