퓨어 HTML,CSS,JS로 캐러셀을 만들어야 할 일이 있어 기본적인 원리를 검색하고, 아래와 같은 인스타그램 고정 피드 캐러셀을 만들어보았습니다(이건 제가 만든게 아니라 진짜 인스타그램 피드입니다)
기본적인 원리는 콘텐츠(이미지)들을 쭉 나열한다음 캐러셀의 크기를 넘는 것들은 overflow: hidden으로 숨겨줍니다. 그리고 왼쪽, 오른쪽 이동 버튼을 눌렀을 때 이미지의 길이와 마진 값을 더해 scrollTo 메서드로 이동시켜주는 것이 전부입니다.
혹시 자세히 알고 싶은 내용이 있으면 댓글 남겨주세요. 수정해서 내용 반영하겠습니다.
인스타그램 고정 피드 캐러셀 코드입니다.
블로그 이전 했습니다: https://techpedia.tistory.com