Written by java-style
on 2021-09-18

21/09/18 - 패스트캠퍼스 챌린지 13일차[Part 1 - Ch 10. 스타벅스 예제...

프로모션 이미지 슬라이드

원하는 위치로 옮기고 기본적인 스타일을 지정해보자!

위와 같이 js 지정한다.

pagination의 위치가 이동한 것을 볼 수 있는데

이것은

. swiper-pagination 부분에 이미 자바스크립트 라이브러리가 제공하는 기본 스타일이 들어가 있기 때문이다.

다음은

.swiper-pagination-bullet 을 지정하여 스타일을 넣어주자

지금 활성화된 슬라이더 버튼에 이미지를 넣어주고 효과를 주는 역할을 한다.

다음은 이전 슬라이드 다음 슬라이드 지정하자

위와 같은 동그란 버튼이 생긴다.

위와 같은 방식으로

.swiper-next 의 값을 지정해 보자

위와 같이 css 내용이 같을 경우 쉼표로 구분하여 표현이 가능하다.

반드시 줄바꿈 처리를 해서 적용해라

위와 같이 swiper-prev 와 next를 지정해서

슬라이드의 전 후를 움직이는 자바스크립트 라이브러리를 적용한다.

실습 화면

슬라이드 영역 토글

우리가 스타벅스 프로모션이라는 부분에서

토글 포로모션이라는 클래스 가지고 이 요소를 클릭하면

하단에 만든

promotion을 수직으로 열거나 닫아 주는 역할을 해보자

다음과 같이 js 로 제어를 해보자

위의 설명은

promotion이라는 클래스를 가진 요소를 찾아서

promotionEl이라는 변수에 값을 할당한다.

toggle-promotion이라는 클래스의 요소를 찾아서

promotionToggleBtn이라는 변수에 값을 할당한다.

isHidePromotion라는 변수가 false인데

이것은 promotion영역이 숨겨졌니 묻는것인데 false라고 해서 지금

숨겨지지 않았다는 뜻 즉 보이고 있다는 뜻이다.

위와 같이 promotionToggleBtn 이라는 버튼을 선택하면

함수가 실행이 되는데 그 함수의 역할은

isHidePromotion = !isHidePromotion 와 같이

위에서 지정한 isHidePromotion 의 값의 반대 값이 지정이 된다.

즉 위에는 false였으니까 반대 값은 true가 재할당이 된다.

아래에 if 조건문이 실행이 된다.

다음은 css부분을 지정해 주자

위의 hide 선택자의 css 값을 지정하자

결괏값은 프로모션 부분이 열고 닫힘이 가능해졌다.

일단 지금까지 꾸역꾸역 하고는 있다.

하지만 놓친 부분이 더 많은 것 같다

스케치북으로 비유하자면 실선정도만 스케치한 것과 같은?

그럼에도 불구하고 일단 이러한 경험이 필요하다.

즉 한번에 완성형이 되는 것은 절대 없다는 뜻이다.

조금만 인내심을 가져보자

일단 js로 처리할 수 있는 부분이 굉장히 많음에 흥미로웠다.

여태 보지 못했던 여러 가지 기능들을 기대해보자

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

from http://dhstory311.tistory.com/110 by ccl(A) rewrite - 2021-09-18 20:01:25

Top