잠깐! Carousel이 뭐죠?

car·ou·sel /ˌkerəˈsel/

1. 회전목마

영어 단어 의미로 회전목마지만, 프론트엔드에서는 이미지 슬라이더 컨트롤을 의미합니다.

이런 단순한 형태부터

이렇게 멋지고 화려하게 발전이 가능합니다!

목표

• 주어진 웹사이트와 동일한 형태와 내용를 사용하고 비슷한 폰트를 적용합니다.
• 주어진 사진 4장을 이용해서 1개당 2장씩 2개의 Carousel을 배치합니다.
• Github Pages로 배포합니다.

대상

Pat Buomo - Cargo Example Site

요구사항

• index.html, styles.css, action.js 로 구성합니다.
• 상단 bar는 스크롤할 때 사라지지 않고 위치를 유지해야 합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/baf04d94-b4a1-434c-90cd-7fdc3cb7429d/__2020-10-13__2.45.40.mov

• Carousel 위에 마우스 커서를 갖다 대면 양 옆에 사진을 넘길 수 있는 컨트롤 버튼이 나타나고, 마우스 커서를 치우면 다시 사라지는 hover transition을 줘야 합니다.
• Carousel에서 컨트롤 버튼을 누르면 지정된 순서대로 사진을 넘길 수 있어야 합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fb903df3-b6fc-4a8f-b20f-00b5245f2f56/__2020-10-13__2.49.20.mov