2021-06-28 (77일차) 스와이퍼 사용방법, 스와이퍼 슬라이드, 스와이퍼 방향키 옮기기

  스와이퍼 5~10강  

< 스와이퍼 사용방법 >

 

- 한 화면에 슬라이드 3개 넣는 방법

  스와이퍼 사이트 접속 > Demo > Slides per view > Open in new window 클릭

  > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기

슬라이드 한 화면에 3개 나오게 하는 소스코드

 

- 슬라이드 간의 여백을 띄우는 방법

  스와이퍼 사이트 접속 > Demo > Space between > Open in new window 클릭

  > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기

슬라이드 간의 여백을 띄우는 소스코드

 

- 슬라이드를 무한반복하는 방법

  자바스크립트에 loop : true 추가

 

---

< 슬라이드의 네비버튼(방향키) 내리는 방법 >

  : swiper의 방향키 기본값 absolute, top-50% 으로 인해 위치하는 것

  ㄴ 버튼에 top :auto; bottom:0;값을 주기

  ㄴ 문제점 : html의 link에서 swiper을 가장 아래에 줘서 swiper값을 이기지 못함

  ㄴ 해결방법 : css에서 지정값을 더 자세히! + 앞에 .slider-box-1 붙이기

---

< 슬라이드의 네비버튼(방향키) 슬라이드 아래로 내리는 방법 >

<문제점>

슬라이드 방향키버튼의 부모에  overflow-hidden이 적용되어 있기 때문에,

아무리 밖으로 내보내려해도 가려지는 상황

<해결방법>

버튼 부분을 swiper-container의 아래 형제로 놓기

<문제점>

absolute값을 가진 버튼들이  body 전체에서 떠돌게 됨

<해결방법>

버튼들에게 position:static 값

<문제점>

버튼의 기본값margin-top : -22px 때문에 버튼이 겹쳐서 나오게 됨

<해결방법>

버튼들에게 margin-top : 0 값으로 해결 (어떤 원리인지 모름ㅋ)