웹4 2일차

[복습] - 스와이퍼 반절 배치하기

-. 선생님 드라이브에 올려놓은 코드 보기

 

1440px 밖으로 나가면 잘리게 됨 -> swiper0box가 버튼의 반절까지 와야함

버튼 사이 40 , 버튼 반절 20 = 20px + 여백값 (10px) =30px x 2 = 60px

그그래서 전체에서 60px 을 빼야함

 

버튼너비 - 반절너비 = n

n + 여백값 = n2

n2 x 2 = 답

 

[페이지네이션 커스텀(1단계:자바스크립트 코드 추가, css기본값)]

수업 코드펜 바로가기

 

-. 스와이퍼 - 맨밑의 데모버전으로 들어가 페이지네이션 확인

 

-. ctrl+U 를 클릭해 자바스크립트를 확인한 후 페이지네이션에 삽입

 

index= 0 부터 시작 - 자바스크립트 페이지 자체의 순서

return = 돌려준다 반환한다 / span 태그를

 

 

-. 탭에 데이터 불러오는 법

 

 

index = 텍스트

tab = 변수

 

 

 

[페이지네이션 커스텀(2단계)]

수업 코드펜 바로가기

 

-.  커스텀 하기 전 밑단계

스와이퍼 페이지네이션 주석값을 찾아준 후 긁어온다

기본값

기본값으로 세팅해준다

 

 

-. swiper-magination을 swiper-box 위로 올려준다

 

 

-. 개발자모드에서 가져온다

-. 

 

 

 

 

 

 

-. 여백 없애기

이거 여백 없애기

 

스와이퍼 공식 홈페이지 API에 들어가 --swiper-pagination-bullet-horizontal-gap 을 검색하고

밑에처럼 넣어야 함

라이브러리는 우리가 생각하는 범위를 벗어나게 커스텀해야하는 경우가 많다. 코드를 사용할 때 위에서부터 아래까지 전체적으로 꼼꼼하게 관찰 후 사용하면 오류를 줄일 수 있다

 

 

-. 너비 맞춰보기

ㅇㅇㅇ

 

 

수업때 복습한 코드펜 바로가기

숙제 : 팝업 처음부터 끝까지 다시 구현하기 / 모작하기