웹4 1일차 - 스와이퍼 복습

[스와이퍼 복습하기]

수업 코드펜 바로가기

swiper-box는 스와이퍼 구조 형제로 타이틀이나 다른 상품구조가 들어올수도 있기 때문에 항상 만들어줘야 한다.

 

-. 스와이퍼 스크롤 오류?

ㄴ swiper라는 클래스에 고정 높이를 지정하지 않으면 스크롤이 무한으로 생기는 오류가 있다.

 

* 해결방법

swiper 클래스에 고정 px 높이를 지정한다

그 외 상위 엘리먼트 한테는 고정 px높이를 지정하지 않아도 괜찮다.

 

-. 개발자 모드에 상위엘리먼트

ㄴ 상위선택자가 개발자모드에 선택되어있는 경우 상위선택자가 개발자모드에 선택 되어 있기 때문에 스와이퍼 공식 홈페이지에서 커스텀할 코드를 가져와서 적용해야 한다

 

슬라이드 펄뷰-프리뷰-컨트롤+U = 코드보기로 가져오기

 

slidesPerView - ㅇ

vertical - 세로로 정렬 

horizontal - 가로로 정렬

 

[버튼 밖으로 빼기]

 

container - 1440pxswiper-box - 100%(

 

container(1440px) - 버튼 너비 = swiper-box

 

 

 

 

 

calc 라는 속성값을 이용하여 사칙연산을 해주어서 크기가 계속 변할 수 있는 버튼의 사이즈를 계산해준다

-, + 양옆에 띄어쓰기를 해줘야 함

 

2.

을 사용하여 container 안으로 쏙 넣어준다

 

[아이콘 바꾸기]

 

1. 개발자모드를 들어가 버튼을 클릭하여 ::after(버튼)에 적용된 css를 긁어와 주석처리

 

2.

next와 prev를 none처리해서 없애준다

 

3. 구글심볼에서 원하는 아이콘을 카피해준 후 html에 넣어줌 / 스판태그를 복사해서 div안에 넣어줌

 

4.

원하는대로 커스텀해주면 끝

 

▶ 복습해본 코드펜 바로가기