[JavaScript] 캐러셀(이미지 슬라이드) 만들기

HTML로 만든 캐러셀 구조. i태그가 누르면 슬라이드 되는 버튼이고, carousel-wrapper는 한개의 이미지만 보일 수 있게 hidden을 처리할 예정. 그리고 캐러셀 클래스 내에 a태그 안에 이미지와 설명을 위한 span을 넣는다.

그리고 가장 밑에 circle은 슬라이드가 현재 어디를 가리키고 있는지 보여주는 동그라미

 

 

 

 

carousel-wrapper에 오버플로우 hidden 처리를 하면 사진 하나만이 화면에 나타나게 한다. 그리고 carousel 태그를 flex정렬 설정하여 사진들을 가로로 딱 붙히고, 캐러셀이 움직일 경우 0.2초 트랜지션을 설정하여 움직이게 한다. 사진의 크기는 넓이 700px 높이 400px로 통일한다.

 

 

 

 

동그라미 역시 flex로 설정하여 가로 정렬 한다. 그리고 circleActive라는 html에는 없는 class CSS를 만든다.

만약 내가 특정 슬라이드를 보여주고 있다면 class를 추가, 제거 하는 방식으로 동그라미 표시가 구현되게끔 할 것이다.

 

 

 

 

만든 모습

 

 

 

이제 캐러셀이 제대로 동작하도록 자바스크립트를 이용한다. 캐러셀 버튼들, 이미지, 표시할 동그라미 등등을 불러오고

이전 버튼을 클릭하였을 시, 만약 인덱스가 0이라면 이전 버튼을 눌러도 실행되지 않도록 했고, 인덱스를 -1씩 감소시킨다. 그리고 캐러셀의 스타일의 트랜스폼을 불러와서 이미지 넓이 X 인덱스 크기 만큼 이동시켜 캐러셀이 작동되도록 하였다.

캐러셀 이미지를 3개 만들었기에 다음 버튼을 클릭사였을 시, 만약 인덱스가 2이라면 다음 버튼을 눌러도 실행되지 않도록 하였고, 인덱스를 +1 씩 증가시킨다. 그리고 마찬가지로 캐러셀이 작동되도록 하였다.

 

그리고 인덱스를 표시할 동그라미,  이전 버튼을 누를 시 , 현재 인덱스의 동그라미 표시를 나타내는 클래스 classActive를 추가하고, 이전 인덱스의 classActive는 삭제한다. 다음 버튼을 누를 때도 똑같이 적용한다. 차이점은 이전 버튼을 누를 시, 뒤에 있는 인덱스의 동그라미 표시를 삭제하고, 다음 버튼을 누를 시, 앞에 있는 인덱스의 동그라미 표시를 삭제한다.

 

 

 

 

확인 결과 정상적으로 캐러셀이 동작하였다.