[스와이퍼 셋팅] : 코드펜
스와이퍼 불러오기
스와이퍼 사이트 접속 - 스타트
js-> 상단 부분의 direction바꾸기
[스와이퍼 레이아웃 구성하기] : 코드펜
1. 스와이퍼 전체적인 구조 시작 전체를 지워놓고, 구조 짜 놓은 후 스와이퍼를 넣어야 하는 박스 안에 스와이퍼 구조를 넣는 형식으로 구현.
* 이미지엔 스크롤바가 포함되어 있지 않지만 스크롤바까지 포함임..
[데모버전으로 구현하기] : 코드펜
js 에서 필요한 부분만 따와서 사용하기.
반응형 때 사용하는 개념 중 , 너비를 max로 사용
* max-width: 0부터 ~px까지 사용 가능하다는 뜻.
[스와이퍼 버튼 커스텀] : 코드펜
- 기본셋팅 : 개발자 모드에서 css 속성값 가지고 와서 주석처리해두기.(코드값 보기 편하게 정리해두면 좋음)
1.container에 자식으로 만들어야 한다.(화면이 줄었을때 버튼이 보이도록)
2.container안에 버튼이 갇히도록 container에 relative를 적용했다.
3.버튼 크기만큼 swiper크기를 빼야한다.(swiper구조 밖에 버튼이 있어야하기 때문이다.)
4.html에서 스와이퍼와 버튼 박스를 각각 만들어서 배치했다.
5.swiper-box너비를 container 1200 - 버튼 60 계산 후 중앙으로 정렬했다.
6.화면이 줄었을때 버튼을 기준으로 양 옆 여백을 10px씩 주고 싶었다. 그래서 swiper-box너비를 container 1200 - 버튼 60 - 여백 40 값을 적용했다.
ㄴ width: calc(1200px - 60px - 40px);
7. 버튼 위치를 위치속성으로 조정했다.
[스와이퍼 반응형]
* 반응형 - 상위 엘리먼트 아래의 하위 엘리먼트 안에 있는 요소들은 모두 %로 크기가 측정되어야 함.
px로 되는 순간 고정형으로 바뀜.
px은 고정형이다 생각하면 됨.