웹3 - 9강 (6.5)

주요 내용은 코드펜에 적혀있음

 

[스와이퍼 개발자 모드 기본설정]

***스와이퍼 가져온 후 개발자 모드에서 기본 설정되어 있는 CSS 설정들 잘 확인하기***

기본 설정 때문에 커스텀이 되지 않을 수 있기 때문

커스텀 해야하는 부분들 가져와서 기본 설정 변경해주기

프리뷰 클릭

\

ctrl U 누르면 코드 보여줌 가져다 쓸 수 있음.

 

 

[스와이퍼 마켓컬리 상품리스트 구현]

https://codepen.io/kkkge/pen/dyERyOq

스와이퍼 마켓컬리 상품리스트 구현

 

 

[스와이퍼 데모버전 사용]

https://codepen.io/kkkge/pen/qBGjEaG

스와이퍼 데모버전 사용

 

 

 

[스와이퍼 반응형]

https://codepen.io/kkkge/pen/KKLqwWQ

스와이퍼 반응형

 

 

[스와이퍼 반응형 활용]

https://codepen.io/kkkge/pen/ExzXadq

스와이퍼 반응형 활용

 

 

[스와이퍼 버튼구조 밖으로 빼기]

1단계 -  https://codepen.io/kkkge/pen/MWdowgR

스와이퍼 양쪽 버튼 커스텀 (1단계: 버튼구조 밖으로 빼기)

2단계 -  https://codepen.io/kkkge/pen/pomwJjY

CodePen Home 스와이퍼 양쪽 버튼 커스텀 (2단계: relative 설정 후 버튼 위치 조정)