기록과 정리

[나의 케이스]

1. 컬러립 사이트에서 디자인소스 받음 https://colorlib.com/wp/templates/
2. 내가 받은 디자인 https://colorlib.com/preview/theme/shotgear/
3. 디자인 내에 캐러셀이 이미 있었음.

4. 2초 간격으로 사진이 자동으로 넘어가게 하는 성정 추가하고 싶었음.

[기본 디자인]

대충 아래와 같이 생긴 기본 템플릿.

노란 부분에 내가 원하는 여러 장의 사진이 들어가길 원함.

+ 2초 간격으로 사진이 넘어갔으면 했음.

[코드 수정 내용]

1. 다른 부분의 캐러셀 코드를 뜯어서 원래 안경 쓴 사람 사진이 있던 위치에 넣음

2.  화면이 넘어가는 단락 찾아내서 그 부분을 이미지소스로 바꿔줌

3. 이미지는 이미지만 모아놓은 폴더 속에 넣음

4. 스크립트 부분에 동작을 넣어줌 (첨부사진 아래 자세히 설명)

캐러셀 이미지가 들어갈 전체 div의 id 부분을 찾아넣음. (JSTL 활용함)

owlCarousel 캐러셀을 이용한 템플릿이어서 이렇게 설정해줌.