[스와이프 라이브러리 사용하기]
1. 스와이퍼 사이트에서 'Get Started' 버튼 클릭
2. 'Use Swiper from CDN' 영역에서 라이브러리의 css, script링크코드 복사 후 삽입
3. 'Add Swiper HTML Layout' 영역에서 html 기본구조코드 복사 후 삽입
4. 'Swiper CSS Styles/Size' 영역에서 css 기본 코드 복사 후 삽입
5. 'Initialize Swiper' 영역에서 JS기본코드 복사 후 삽입
6. 스와이퍼 기본 형태 확인
정확히 확인할 수 있도록 스와이퍼의 배경색을 '#e1e1e1'로 지정하였다.
css로 중앙정렬을 시키지 않았음에도 불구하고 스와이퍼가 중앙정렬한 모습을 보아,
삽입한 라이브러리의 css링크로부터 기본적으로 세팅되어 있는 css속성을 가지고 있음을 확인할 수 있다.
삽입한 라이브러리의 css의 내용을 보고싶다면 링크된 url로 검색하면 min.css의 내용을 볼 수 있다.
min.css는 https://csscompressor.com/ <= 이 링크를 통해 원래의 형식으로 되돌릴 수 있다.
min.js의 경우 또한 https://jscompress.com/ <= 이 링크를 통해 원래의 형식으로 되돌릴 수 있다.
평범한 css와 js를 min의 형태로 만드는 것 또한 가능하니,
수정이 불필요한 파일의 경우 min파일로 만들어서 파일의 용량을 줄여보자.
[주의사항]
기본 css코드를 삽입해 주지 않는다면 일어나는 오류가 있다.
이는, 스와이퍼의 크기를 정해주지 않았을 때 일어나는 현상인데, 스와이퍼의 크기가 너비는 100%, 높이는 굉장히 크게 생성되어서 스크롤이 굉장히 길게 형성됨을 볼 수 있다.
아래와 같은 내용을 확인하여 일어나는 오류에 대해 이해하고 해결 할 수 있다.
1. 새롭게 추가한 스와이퍼 박스(.swiper-box)에 고정크기를 적용해도 스크롤은 해결할 수 없다.
2. 새롭게 추가한 스와이퍼 박스(.swiper-box)는 고정크기를 지워도 스크롤 문제가 생기지 않는다. (조건: 스와이퍼(.swiper)에 고정높이가 적용 되어있어야 함.)
3. 스와이퍼 구조를 활용할 때, 스와이퍼(.swiper)에 고정 높이를 적용하고 .container에 있는 고정높이를 제거하며 auto값을 사용하면 조금 더 완벽하게 구현할 수 있다.
★★결론 ★★
스와이퍼(.swiper)에 고정높이가 없으면 스크롤이 이상하게 나오는 오류가 있고 스와이퍼 상위 엘리먼트들은 아무렇게나 구현해도 스크롤 오류가 생기지 않는다.