Swiper 활용하기 - 01

 

swiper를 이용해서 움직이는 슬라이드를 만드는게 가능해졌다.

버튼을 만들어 클릭 기능을 만들고, 자동으로 넘어가는 기능, 다양한 이펙트 종류도 알게 되었다.

 

이번엔 새로운 기능과 함께

화면에 보여지는 디자인에 관련된 속성을 공부해보려고 한다.

 

주로 화면에 하나의 슬라이드만 보이는 디자인이 많이 보이지만,

여러 상품 리스트 같이 화면에 2개 이상의 요소를 보여줘야 할 때가 있다.

 

화면에 보여지는 슬라이드 갯수를 조절하는 속성 "slides per view" 이다

 

1. 화면에 보이는 슬라이드 갯수 조절

 

Slides per view의 core에 들어가

코드를 가져온다.

 

속성값에 숫자를 입력하게 되면

한 화면에 보이는 슬라이드 갯수를 조절 할 수 있다.

기본은 1이고, 만약 swiper에서가 아닌 css 에서 크기 조절을 하고 싶다면

 

auto로 설정해 자동으로 해도 된다.

 

2. cssMode

swiper의 모든 기능을 필요로 하지 않고

단순하고 간단한 기능만 필요하다면 사용한다.

css mode의 core에 들어가

코드를 가져온다.

 

기본 값은 "false" 이고 활성화 하고 싶다면 "true"로 하면 된다.

cssMode : true, 를 하게 되면 swiper가 제공하는 애니메이션 기능들을 사용하지 않는다.

loop, effect, autoplay 등이 이에 해당된다.

3. 슬라이드 간의 간격 조절

슬라이드가 이동할 때나 한 화면에 여러개의 슬라이드가 있을 때

슬라이드가 붙어 있다면 구분이 안되고 답답해 보일 수가 있다.

css로 간격을 줄 수도 있지만 그럴 경우 움직이는 거리가 밀릴 수 있어

swiper의 기능을 이용하기로 한다.

 

Space between의 core에 들어가

코드를 가져온다.

 

값으로는 숫자만 입력하면 되고 단위는 px로 적용된다.

 

 

4. 무한 슬라이드

슬라이드을 넘기다가 마지막 슬라이드에서 처음 슬라이드로 이동하고 싶을 때,

또는 맨처음 슬라이드에서 마지막 슬라이드로 이동하고 싶을 때가 있다.

 

사용자의 편의를 생각해 무한으로 이어지는 슬라이드가 필요할 때

Infinite loop의 core에 들어가

코드를 가져온다.

 

기본 값은 "false"이고 무한 슬라이드를 이용하고 싶다면 "true"값을 준다.

이제 첫번째 슬라이드에서 마지막 슬라이드로, 마지막 슬라이드에서 첫번째 슬라이드로

계속해서 이어지는 슬라이드가 만들어진다.

 

공부 할 수록 활용할 수 있는 기능이 다양해 신기하다.

기능 뿐만 아니라 디자인도 내가 원하는 대로 변경할 수 있음에

또 어떤 매개변수가 있을지 궁금해진다