{**Tip**}
스와이프 html구조를 삽입해줄 때 swiper-box는 스와이퍼 구조 형제로 타이틀이나 다른 큰 구조가 들어올수도 있기 때문에 항상 만들어줘야 한다.
[스와이프 한 번에 여러 개 넘기기]
스와이프의 기본 구조는 아래와 같다.
<div class="swiper-wrapper"></div>의 자식 엘리먼트로 슬라이드 페이지들이 있다.
화살표 버튼을 눌러 넘어가는 페이지들이 .swiper-slide를 클래스로 가진 엘리먼트들이다.
아래에는 Slide1~3로 총 세 페이지가 있음을 알 수 있다.
쇼핑몰 사이트에서 볼 수 있는 스와이퍼는 한 번에 여러 개의 상품를 넘긴다.
어떻게 여러 개를 넘길 수 있게 할 수 있을까?
한 페이지에 여러 개의 박스(쇼핑몰의 경우, 상품)를 만들면 된다.
화살표 버튼을 눌러 넘기면 한 페이지가 넘겨지지만, 마치 여러 개를 한번에 넘기는 것처럼 보인다.
[스와이퍼 여러 개 띄우고 한 개씩 넘기기]
스와이퍼를 한 개씩 넘기는 데 화면에는 여러 개 띄우고 싶다면 JS의 스와이퍼 옵션에서 속성값을 설정해주면 된다.
스와이퍼 라이브러리의 속성에 대해 더 알고 싶다면 공식 홈페이지에서 API에 나와있으니 살펴보자.
스와이퍼 화면에 띄우는 페이지의 개수를 조절하는 속성은 slidesPerView이고 속성값으로 원하는 개수의 숫자를 적어주면 된다.
추가로, 페이지 간의 간격을 설정해 보기 편하게 만들어 줄 수 있다.
const swiper = new Swiper('.swiper', {
// 방향, 반복, 네비게이션, 스크롤 등등 다양한 옵션이 있다.
...
// 하나의 swiper-wrapper안에 들어갈 swiper-slide의 개수
slidesPerView: 3,
// 슬라이드 간격
spaceBetween: 30,
});
[스와이퍼 반응형]
사용자에 따라 웹 환경이 다양하다.
반응형은 웹 페이지 너비에 따라 구조를 유동적으로 변화시켜 사용자가 어떤 환경에서든 편하게 볼 수 있도록 하기 위한 기술이다.
반응형의 스와이퍼를 만들어 보자.
스와이퍼의 옵션에서 반응형 옵션은 'breakpoints'이다.
옵션값으로 '반응형 너비': '너비에 따라 차별화된 스와이퍼 옵션'이 들어간다.
차별화된 스와이퍼 옵션은 오른쪽의 조건하에 적용된다. [윈도우 너비 >= 반응형 너비]
간단하게 공식 홈페이지에 있는 JS코드를 가져와서 적용해보자.
빨간색 상자 안에 있는 코드만 복사&붙여넣기하면 된다.
아래의 코드를 참고해보자.
const swiper = new Swiper('.swiper', {
...
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// 1. 윈도우 너비 >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// 2. 윈도우 너비 >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// 3. 윈도우 너비 >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
},
...
});
위의 예제는 윈도우 너비가 320px, 420px, 640px일 때 각각 구조가 달라지도록 되어있다.
윈도우 너비 >= 320px : 화면에 2개의 페이지, 간격 20px
윈도우 너비 >= 480px : 화면에 3개의 페이지, 간격 30px
윈도우 너비 >= 640px : 화면에 4개의 페이지, 간격 40px
[유의할점]
반응형 스와이퍼를 적용할 때 유의할 점을 살펴보자.
1. 가장 작은 화면에서 슬라이드가 한 개로 나와야 할 때 slidesPerView를 1로 설정,
spaceBetween을 10으로 설정해야 한다.
2. 스와이퍼 반응형은 ★무조건★ 작은 화면부터 작성 해야한다.
3. 공식 홈페이지에서 breakpoints 코드를 가져왔을 때 마지막에 작성 되어있는 중괄호에
' }, '←이것처럼 ★콤마★를 반드시 찍어줘야 한다.
