스타벅스 클론(6) - 요소 슬라이드(1) - 공지사항 swiper

이 부분을 보시면 왼쪽 오른쪽 색상이 다르며

왼쪽 공지사항에 위로 자동으로 굴러 가고 있습니다.

 

html파일은 어렵지 않아서 설명 생략하겠습니다.

 

swiper-container은 공지사항 중 위로 굴러가는 영역을 지칭했는데 아직 내용을 추가하지 않았습니다.

 

css입니다.

기본적인 position, display:flex, justify-content등등 설명을 안 해도 될 것 같습니다.

swiper-container는 내용이 없어서 위치등 확인하기 어렵기에 속성을 넣어본 겁니다.

 

지금부터 swiper영역을 제작해보겠습니다.

swiper 참조

 

위에 div에 swiper-container 클래스를 부여한 것이 swiper 6버전 전입니다.

swiper 7버전부터 swiper로 간략해졌고 기타내용은 크게 달라지지 않았습니다.

 

여기서는 최신인 10버전을 사용해보겠습니다.

 

html파일입니다.

swiper, swiper-wrapper, swiper-slide는 모두 규정대로 작성했습니다.

 

css에서 스타일을 좀 다듬어줍니다.

js파일에서는 swiper홈페이지 참조해서 작성했습니다.