목록Slider (13)

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

[해피CGI][cgimall] Responsive GSAP Slider with Button Wave Effect

버튼 웨이브 효과가 있으며 반응형 슬라이드 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML               Fruity                                                Pear              https://www.yudiz.com/codepen/fruity/cane.svg" alt="" />        https://www.yudiz.com/codepen/fruity/Labels.jpg" alt="" />                                                         https://www.yudiz.com/codepen/fruity/pear-one.png" alt="pear-image" /> ..
웹프로그램밍 자료실/HTML 자료 2024. 6. 26. 09:09
[해피CGI][cgimall] Flight slider

HTML, CSS로 제작되었으며 슬라이드에 시각적 효과가 들어가 있습니다.데모사이트 주소에서 확인이 가능합니다.   HTML    New York    Madrid
웹프로그램밍 자료실/HTML 자료 2024. 6. 3. 09:24
[해피CGI][cgimall] Ultra Small Responsive jQuery Image Slider - kslider

kslider는 이미지를 우아한 방식으로 표현하기 위해 만들어진 초소형, 완전 반응형, 사용하기 쉬운 jQuery 기반 슬라이더입니다. 화면 크기에 따라 높이/너비를 자동으로 조정합니다. 호버링 시 탐색 화살표를 자동으로 표시하거나 숨깁니다. Auto는 img의 속성에서 이미지 캡션을 만듭니다.alt 특정 속도로 이미지 간에 자동 전환됩니다. 회전목마와 같은 무한 루프. 와 같은 기능이 있습니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2024. 1. 30. 09:32
[해피CGI][cgimall] CSS-only Carousel Slider

이미지 슬라이드를 HTML 과 CSS만으로 제작하는 방법입니다. HTML 소스 CSS-only Carousel This carousel is created with HTML and CSS only. Go to last slide Go to next slide Go to previous slide Go to next slide Go to previous slide Go to next slide Go to previous slide Go to first slide Go to slide 1 Go to slide 2 Go to slide 3 Go to slide 4 CSS 소스 @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; ..
웹프로그램밍 자료실/HTML 자료 2023. 8. 2. 09:34
[해피CGI][cgimall] Expanding flex cards - 카드형식의 배너

카드형식의 배너로 슬라이드 배너/ 네비게이션 등 활용도가 높을뿐 아니라 트렌디한 디자인으로 사이트 사용시 디자인 및 유용성이 높습니다. HTML 소스 Blonkisoaz Omuke trughte a otufta Oretemauw Omuke trughte a otufta Iteresuselle Omuke trughte a otufta Idiefe Omuke trughte a otufta Inatethi Omuke trughte a otufta Photos from Victor of Valencia on tumblr CSS 소스 $optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC; body { display:flex; flex-dir..
웹프로그램밍 자료실/HTML 자료 2023. 4. 26. 09:19
[해피CGI][cgimall] Slick Slider with auto play YouTube, Vimeo and HTML5 video 동영상 슬라이드

고정된 이미지 vimeo 동영상 youtube 동영상 이미지 또는 자동재생되는 동영상을 슬라이드 되는 형태로 출력합니다. 정해진 가로 세로 비율에 따라 출력됩니다. 첨부된 파일을 다운로드 하거나 해당 사이트에서 전체 소스를 확인할 수 있습니다. css 로 슬라이드시 에니메이션 효과를 변경할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 1. 16. 09:06
[해피CGI][cgimall] Responsive Touch-enabled Image Lightbox Plugin

데스크톱 및 모바일 웹 사이트에서 이미지 라이트 박스 및 갤러리 라이트 박스를 만들 수 있습니다. 첨부된 파일을 다운로드 해서, 압축을 해제하고 나면 demo 라는 폴더가 있습니다. demo 폴더에 있는, demo/index.html 파일과, demo/onlyImages.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위 와 같은 화면이 표시가 되고, 우측의 이미지를 클릭 해보면, 위 그림과 같이 이미지를 슬라이더로 표시하는 기능을 확인하는게 가능합니다. 사용법은 아래와 같습니다. 지원되는 옵션들은 다양하며, 반응형 터치 지원 이미지 라이트박스 플러그인 | 무료 jQuery 플러그인 (jqueryscript.net) 위 페이지에서 확인이 가능하겠습니다. 그 외의 method 및 event 는 아..
웹프로그램밍 자료실/JAVA 자료 2023. 1. 5. 09:25
[해피CGI][cgimall] Responsive CSS Image Slider(반응형 슬라이드)

흔하게 쓰는 메인슬라이드 반응형사이트에서 작게나오거나 반응형이 작동안하실경우 모바일 이미지를 따로 올리거나 css를 따로 작성해야하는 번거로움이 있습니다. 다음소스는 반응형 슬라이드 소스입니다.
웹프로그램밍 자료실/HTML 자료 2022. 11. 28. 09:18
[해피CGI][cgimall] Expandable Animated Card Slider 확장 카드 슬라이드

클릭시 아래처럼 선택된 카드가 확장됩니다. css로 쉽게 가로사이즈 변경이 가능합니다. 마우스 드래그 또는 클릭으로 슽라이드 이동이 가능합니다.
웹프로그램밍 자료실/HTML 자료 2022. 10. 28. 09:29
[해피CGI][cgimall]범위 슬라이더로 텍스트 확대/축소 JQuery 플러그인

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 content-zoom-slider.min.js 파일을 링크합니다. 2. 플러그인에서 사용되는 Font Awesome Iconic Font 사용을 위해 css를 링크합니다. 3. 확대/축소 툴바를 만듭니다. 4. 텍스트 영역을 추가하고 플러그인을 호출합니다. 5. 확대/축소 범위를 설정할 수 있습니다. 6. 초기 출력 비율을 설정할 수 있습니다. 7. 확대/축소 단계를 설정할 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2022. 7. 26. 09:07
Prev 1 2 Next