CSS Scroll Snap Slide
HTML, CSS 사용하여 이미지 슬라이드 기능(스크롤, 스냅) 만들기
슬라이드로 item을 옆으로 넘기는 기능은 스크립트를 사용해서 만드는줄만 알았는데 CSS만 사용해도 충분히 구현이 가능했다.
아래의 코드펜 Result를 '개발자도구 > 모바일' 버전으로 확인하면 container 하위의 item 사진 요소를 옆으로 넘길 때 item의 왼쪽부분이 container에 찰싹 붙으면서 슬라이드 이동하는 것을 확인할 수 있다.
See the Pen slides(snap) by yuran (@rubberduck12345) on CodePen.
부모요소
container에는 snap의 축 방향과 strictness를 지정하는 scroll-snap-type 속성을 쓰고
scroll-snap-type:x mandatory;
자식요소
item이 contain에 달라붙는 기준을 item의 start, end, center 중에서 지정하는 속성을 써야한다
scroll-snap-align: start;
미리보기
'웹개발' 카테고리의 다른 글
| click 이벤트 함수 - 이벤트 버블링 해결 방법, stopPropagation (0) | 2023.01.11 |
|---|---|
| transform 속성 translate, scale, rotate 변환 함수 예시 (0) | 2022.12.05 |
| 딤드(deemed) 레이어 팝업에 어두운 배경 적용하기 (0) | 2022.11.23 |
| details와 summary 태그로 아코디언 만들기 (0) | 2022.11.21 |
| [메모] React 리액트 (1) | 2022.11.07 |
