Carousel
-
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기Front-end/CSS 2020. 11. 13. 01:18
scroll-snap scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성입니다. 예를들면 에어비앤비 모바일 환경의 숙소 사진을 볼 때 스와이퍼 형태가 바로 이런 방식인데요, 볼 때는 많은 기능들이 들어간 것 같지만 scroll-snap을 사용하면 쉽게 구현할 수 있습니다. 위의 기능을 똑같이 구현해보면서 사용법을 익혀보겠습니다. 예제는 iPhoneX를 기준으로 구현하였습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 코드 전체 보기 index.html 슬라이더를 전체를 감싸는 컨테이너 하나, 그리고 이미지들을 감싸는 슬라이더, 그리고 이미지를 감싸..
-
완전 초 단순하게 캐러셀(Carousel) 구현해보기Front-end/Javascript 2020. 10. 27. 01:45
캐러셀(Carousel) 캐러셀이라는 용어가 조금 생소하실 수도 있는데요 캐러셀은 여러개의 이미지 혹은 영상을 슬라이더 형태로 만들어 표현해주는 것을 말합니다. 바로 위 움짤처럼 말이죠! 정말 간단하게 캐러셀을 구현해보면서 어떤식으로 만들어지는지 살펴보도록 하겠습니다. ❗️ 제가 구현하는 방법은 학습하며 얻은 정보와 지식을 바탕으로 구현한 자료입니다. 혹시 잘못된 정보가 있거나 코드가 있다면 말씀 부탁드리겠습니다. 🙏 전체 코드 보기 프로젝트 구조 엄청 간단하죠? 이제 차근차근 만들어보겠습니다. index.html prev next 먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어줍니다. 위와 같이 만들어 주면 아래와 같은 화면이 나오게 됩니다. 자 이제 저 위의 사진 ..