본문 바로가기

Slider/Image Slider

모바일도 지원하는 이미지 슬라이드 See the Pen Image slider with multiple controls and mobile swipe control (Javascript) by Hakeem (@Akimzzy) on CodePen. 모바일도 지원하는 이미지 슬라이드
GSAP를 이용한 이미지 슬라이드 See the Pen GSAP Simpsons Slider by P (@petegarvin1) on CodePen. GSAP를 이용한 이미지 슬라이드
가장 심플한 자바스크립트 이미지 슬라이드 See the Pen Simple Carousel by Sikriti Dakua (@dev_loop) on CodePen. 가장 심플한 자바스크립트 이미지 슬라이드
3D느낌의 이미지 슬라이드 See the Pen Voyage Slider | GSAP by Sikriti Dakua (@dev_loop) on CodePen. 3D느낌의 이미지 슬라이드
모바일용 이미지 슬라이드 See the Pen Custom scroll slider by Arseny M. (@theseventh) on CodePen. 모바일용 이미지 슬라이드
자바스크립트를 이용한 이미지 슬라이드 See the Pen Ikea Room Gallery Redesign by Lilly (@Yuechun) on CodePen. 마우스 방향에 따라 움직이는 글씨
이미지 변경되는 이미지 슬라이드 See the Pen Another design implementation by Sergiu Lucutar (@sergiulucutar) on CodePen. 이미지 변경되는 이미지 슬라이드
화면이 전환되는 이미지 슬라이드 See the Pen Design implementation by Sergiu Lucutar (@sergiulucutar) on CodePen. 화면이 전환되는 이미지 슬라이드
CSS를 이용한 가로 스크롤 갤러리 See the Pen CSS-Only Horizontal Parallax Gallery by Paulina Hetman (@pehaa) on CodePen. CSS를 이용한 가로 스크롤 갤러리
갤러리형 이미지 슬라이드 See the Pen 🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0 by @keyframers (@keyframers) on CodePen. 갤러리형 이미지 슬라이드
매거진 스타일 이미지 슬라이드 See the Pen Pure CSS Magazine style layout with transitions by Jamie Coulter (@jcoulterdesign) on CodePen. 매거진 스타일 이미지 슬라이드
마우스 효과를 준 리액트 이미지 슬라이드 See the Pen React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen. 마우스 효과를 준 리액트 이미지 슬라이드
버튼을 누르면 변경되는 이미지 슬라이드 형태 See the Pen Image burn effect with mix-blend-mode and background-position by Jamie Coulter (@jcoulterdesign) on CodePen. 버튼을 누르면 변경되는 이미지 슬라이드 형태
에이전시 사이트에서 많이 보는 이미지 슬라이드 See the Pen Agency website POC by Jamie Coulter (@jcoulterdesign) on CodePen. 에이전시 사이트에서 많이 보는 이미지 슬라이드
배경과 타이틀이 변경되는 이미지 슬라이드 See the Pen Kalli Hero by Mariusz Dabrowski (@MarioD) on CodePen. 배경과 타이틀이 변경되는 이미지 슬라이드
WebGL을 이용한 이미지 슬라이드 방식 See the Pen WebGL enhanced javascript drag slider (performance improved) by Martin Laxenaire (@martinlaxenaire) on CodePen. See the Pen WebGL enhanced javascript drag slider (bonus) by Martin Laxenaire (@martinlaxenaire) on CodePen. WebGL을 이용한 이미지 슬라이드 방식
윈도우의 이미지 슬라이드 같은 기능이네요~ See the Pen 3D stack cards like windows7 by Yousef Sami (@yousefsami) on CodePen. 윈도우의 이미지 슬라이드 같은 기능이네요~
둥글게 돌아가는 듯한 이미지 슬라이드 See the Pen Card gallery w/ Angular 6 🃏 😎 #CodePenChallenge by Jhey (@jh3y) on CodePen. See the Pen Card UI concept w/ React + styled-components 🃏😎 #CodePenChallenge by Jhey (@jh3y) on CodePen. 둥글게 돌아가는 듯한 이미지 슬라이드
다양한 디자인이 변경되는 카드 UI 슬라이드 See the Pen Pure CSS Card UI by Adam Kuhn (@cobra_winfrey) on CodePen. 다양한 디자인이 변경되는 카드 UI 슬라이드
클릭하면 사라지고 다시 나타나는 이미지 슬라이드 See the Pen Click/Tap Image Gallery by ilithya (@ilithya) on CodePen. 클릭하면 사라지고 다시 나타나는 이미지 슬라이드
좌우로 움직이는 이미지 슬라이드 애니메이션 See the Pen Recreating "Motion Study" by Mauricio Vio by Jacob Foster (@Alca) on CodePen. 좌우로 움직이는 이미지 슬라이드 애니메이션
GSAP를 이용한 이미지 슬라이드 효과 애니메이션 See the Pen Slideshow GSAP by Alain (@AlainBarrios) on CodePen. GSAP를 이용한 이미지 슬라이드 효과 애니메이션
이미지가 아닌 글씨 이미지 슬라이드 효과 See the Pen Carousel with reversed easing curve by Michelle Barker (@michellebarker) on CodePen. 이미지가 아닌 글씨 이미지 슬라이드 효과
3D로 넘기는 듯한 이미지 슬라이드 효과 See the Pen Pure CSS Magazine style layout with transitions by Jamie Coulter (@jcoulterdesign) on CodePen. 3D로 넘기는 듯한 이미지 슬라이드 효과
확장되는 이미지 슬라이드 애니메이션 See the Pen Expanding flex cards by Zed Dash (@z-) on CodePen. 확장되는 이미지 슬라이드 애니메이션
카드 스타일 UI 이미지 슬라이드 See the Pen Card UI concept w/ React + styled-components 🃏😎 #CodePenChallenge by Jhey (@jh3y) on CodePen. 카드 스타일 UI 이미지 슬라이드
풀페이지 효과 이미지 슬라이드 GSAP See the Pen Fullpage Slider with GSAP by Valery Alikin (@AlikinVV) on CodePen. 풀페이지 효과 이미지 슬라이드 GSAP
SVG를 이용한 이미지슬라이드 효과 애니메이션 See the Pen SVG Mask Slider by Valery Alikin (@AlikinVV) on CodePen. SVG를 이용한 이미지슬라이드 효과 애니메이션
넥스트를 표시해주는 이미지 슬라이드 효과 See the Pen previewSlider / Thumbnail Preview by Valery Alikin (@AlikinVV) on CodePen. 넥스트를 표시해주는 이미지 슬라이드 효과
드래그 하면 한칸씩 올라가는 슬라이드 효과 See the Pen Stepper Iteration with Anime JS by Valery Alikin (@AlikinVV) on CodePen. 드래그 하면 한칸씩 올라가는 슬라이드 효과