[팀플 - Travel Jeju] 15th course - Travel Course XII

[ 오늘 할 일 ]

• 여행경로 모달 구현

[ 전체적인 흐름 ]

• Oven 웹 페이지를 이용하여 모달에 사용할 이미지들 만들기
• Carousel를 사용하여 모달 슬라이드식으로 구현 

---

맵 위에 위치한 이용방법 버튼을 클릭 시 모달 형식으로 

이용방법에 대한 설명이 나오는데,

Oven을 사용해서 이용방법 이미지를 만들어 슬라이드식으로 구현할 예정이다 

 

이미지는 Oven 페이지에서 쉽게 구현할 수 있었다 

 

https://ovenapp.io/

OvenApp.io

처음 여행경로를 들어왔을  때 스크린샷을 찍어서 각 버튼들에 대한 설명을 스티커형식으로 붙였다

두번째로는 맛집 & 관광지 카드들을 주로 삼아 설명하였다 

세번째로는 여행경로 저장하는 방법을 설명하였다 

https://getbootstrap.com/docs/5.0/components/carousel/

Carousel

그리고 모달 안에서 슬라이드식으로 구현하기 위해서 부트스트랩의 Carousel를 이용하였다 

 

이미 구현이 되어 있는 코드라서 가져다 쓰기만 하면 구현이 되었다

10초 간격으로 자동으로 옆으로 넘어가며,

좌 우측에 있는 화살표 방향으로 슬라이드를 넘길 수도 있다