Carousel
-
[JavaScript, CSS, jQuery] SpringBoot : 캐러셀, 이미지 터치 슬라이드프로젝트/기능 정리 2023. 7. 18. 10:14
목적 화면 터치를 감지하여 터치 드래그 시 이미지 슬라이드 전환 기능 구현 이전 글에서 한 화면에 꽉 차는 한 페이지 자체를 슬라이드 하는 기능을 만들어봤다. 페이지 슬라이드 기능에서는 터치를 감지해서 화면을 전환하지 않았지만, 상세 글 보기에 나오는 이미지 캐러셀은 인스타그램 게시물처럼 횡방향 터치 이동 시 전환되도록 만들고 싶었다. 아직 데이터가 없어서 이미지 소스나 개수 등을 동적으로 생성해서 처리하진 않은 상태지만, 슬라이드 기능이 메인이므로 정리해보도록 하겠다. 완성본은 아래와 같다. [HTML] 먼저 html 태그 구조는 아래와 같다. 야경 본 날 반포 한강공원 제목영역과 라디오 버튼은 흐름을 모두 보기 위해 가져왔고, 메인인 슬라이드 이미지 영역은 아래 그림과 같다. 태그 ID를 표시하기 위..