스타벅스 클론(7) - 요소 슬라이드(2) - 프로모션

위에 보시면, 프로모션 이미지는 항상 가운데에 위치하며

밑에는 숫자아님 선택할 수 있고, 화살표로도 다른 이미지를 선택가능합니다.

또한 프로모션 버튼 클릭시 전체영역 숨겨집니다.

 

요소 이미지 가운데 배치

html에서 기본적인 틀을 만들어 봤습니다.

여기도 전 편에 사용했던 swiper 라이브러리 사용할 겁니다.

css에서 너비를 calc()함수 사요할 수 있습니다.

자동으로 계산해주는 거죠.

 

position left에서 50%를 떨어지고, margin-left에서 전체 너비의 반만 여백을 하라는 겁니다.

근데 주의할 점은 이미 position left에서 50%에 떨어진 상태에서,

요소를 정 가운데로 배치하려면

margin-left는 음수, 즉, -(minus)가 붙어야됩니다.

 

프로모션 슬라이드

img를 각각 넣었습니다.

자세히 보시면 정 가운데 이미지가 완전히 보이고

양 옆에 것는 좀 투명하게 나옵니다.

그래서 일단 css에서 투명도 속성도 넣었습니다.

 

각 속성은 주석으로 표시했습니다.

주의할 점은 방향입니다. 

지난 시간에 수직으로 swiper하는 것은 vertical로 따로 명시했는데

이번에는 명시 안 했습니다.

horizontal 수평은 기본값으로 들어가기때문입니다.

 

프로모션 슬라이드 하단 버튼 및 좌우 화살표

pagination이 바로 하단 있는 순서배치버튼입니다.

swiper-prev는 왼쪽 화살표, swiper-next는 오른쪽 화살표입니다.

pagination의 css

swiper은 화면 가운데에 pagination을 정렬하며 색상도 파란색으로 제작했습니다.

제가 한 css는 스타벅스 기본색이 초록색이라 초록색인 동그라미를 넣었습니다.

여러 요소의 속성이 같을 때는 번거롭게 따로 만들 필요없이 ,(쉼표)로 병렬해서 작성해도 됩니다.

 

슬라이드 영억 토글

css 파일에 .promotion에 transition과 overflow 속성을 추가했습니다.

그리고 .promotion.hide에서 높이를 0으로 변경했습니다.

 

여기서 주의해야할 점은 boolean 반대값을 얻을려면 = !를 하면 됩니다.

isHidePromotion은 false값였는데 버튼 클릭 후 이의 반대인 true값으로 변경돼었습니다.

또 클릭하면 false값으로 또 변경됩니다.