swiper? 슬라이드 라이브러리 첫걸음

 

웹을 만들다 보면 슬라이드는 거의 필수적으로 사용하는거 같다.

많은 이미지나 정보를 사용자에게 보여주고 싶은데

반복된 이동은 사용자에게 피로함을 줄 수 있기 때문에

한 페이지에서 볼 수 있는 슬라이드가 효율적이고, 인터랙티브 효과로 보는 재미도 있다.

 

하지만... 슬라이드를 직접 코딩하기란 쉽지 않는 일이다.

가로, 세로 슬라이드, 페이드 슬라이드 다양한 슬라이드를 만들 줄 알려면

html 구조, css, script도 알맞게 사용할 줄 알아야 한다.

 

jQuery를 사용한다면 순수 javaScript로 작업하는 것 보다는 쉽겠지만!

라이브러리 swiper 를 활용한다면 더 빠르고 편하게 작업 할 수 있다!!

 

 

javaScript, React, Vue, WebComponents 에서 사용할 수 있고

 

npm, cdn 으로 설치 하여 사용할 수도 있고 html에 스크립트 코드를 추가하여 사용할 수 있다.

나는 코드를 추가하여 사용하는 방식을 하려고 한다.

 

 

1. 사이트 접속

demo로 바로 들어가면 바로 사용할 수 있는 예시 코드가 다양하게 있다

 

swiper 사이트 :  https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

swiper demo : https://swiperjs.com/demos

Swiper Demos

 

2.  기본 코드

우선 Default 에 있는 Core로 들어가 구조를 확인한다

 

swiper를 사용하려면 html 구조를 잡을 때 규칙이 정해져 있다

 

하나의 슬라이드가 될 .swiper-slide가 두번 감싸져 있어야 한다.

 

.swiper는 슬라이드, 버튼, 페이지네이션 등이 들어갈 영역 요소

.swiper-wrapper는 슬라이드들을 그룹한 요소

만약 한번만 감싼다면 슬라이드 요소를 찾을 수 없다고 오류가 날 수 있다..

 

※ 여러 swiper 를 사용하게 된다면 .mySwiper 대신 내가 원하는 클래스를 주어 사용할 수 있다.

 

swiper를 연결하는 코드는 반드시 실행하는 코드보다 상단에 불러와야 한다.

그렇지 않으면 실행이 안됨

 

swiper가 정말 좋은 점은 script 안에 "속성 : 속성값" 만 적어주면 레이아웃까지 만들어 준다는 것이다

 

 

3. Navigation (이전, 다음버튼) 추가하기

슬라이드가 움직일 수 있도록 버튼을 추가해보자

 

Navigaition의 core에 들어가 

html에서 button 요소들을 가져오고

 

script 도 가져오고 나면

 

버튼을 눌러서 슬라이드를 움직일 수 있게 되었다.

 

※swiper를 여러개 사용한다면 .swiper-button-next이름이 중복되어 슬라이드가 마음대로 움직이지 않을 때가 있다.
그럴 때는 html요소의 클래스 이름을 각각 다르게 지어주고 script에 알맞게 바꾸어 주기만 하면 된다.

 

슬라이드에 추가하고 싶은 기능이 있다면 demo에서 찾아 가져오기만 하면 되는데

코드 전체를 바꾸는게 아닌, 변신 로봇처럼 원하는 기능을 탈부착 하는 느낌이다.

 

4. Effect

슬라이드가 움직이는 효과를 정할 수 있다.

기본은 가로로 움직이는 슬라이드 지만, 세로 또는 투명도를 조절하여 슬라이드를 넘어갈 수 있다.

 

투명해지며 바뀌는 슬라이드의 이름은 fade slide다.

Effect fade의 Core로 들어가서

 

effect 부분을 가져오면 된다

 

effect 의 종류에는

• 'slide' : 좌우 또는 상하로 움직이는 슬라이드
• 'fade' : 서서히 나오고 서서히 사라지는 슬라이드
• 'cube' : 3d 큐브가 회전하는 슬라이드
• 'coverflow' : 겹치며 회전하는 슬라이드
• 'flip' : 3d로 뒤집히는 슬라이드

등이 있다.

 

슬라이드 속도가 빠르거나 느린 것 같다면

speed : 밀리초, 를 입력해서 속도를 제어할 수 있다.

 

5. Autoplay (자동재생)

버튼을 만들기는 했지만 누르지 않더라도 슬라이드가 움직이면 좋겠다.

swiper는 모두 제공한다.

Autoplay의 Core에 들어가서

 

autoplay 을 가져온다.

• delay 는 슬라이드가 자동으로 전환되는 간격을 정하는 속성으로 밀리초를 사용한다.
• disableOnInteraction 는 버튼을 눌렀을 때 슬라이드를 정지 시킬지 정하는 속성이다. (false는 눌러도 계속 재생하고 true는 눌렀을 때 슬라이드를 멈춘다)

 

6. Pagination (슬라이드 총갯수, 현재 위치)

사용자가 슬라이드의 총갯수와 현재 위치를 알고 있어야 답답하지 않고 편히 이용할 수 있을 것이다.

슬라이드를 추가하기만 하면 알아서 갯수를 맞추어 만들어 주는 swiper pagination을 이용해보자

 

Pagination의 Core에서

 

.swiper-pagination을 가져와 주고

script에도 pagination을 추가해준다.

navigation과 마찬가지로 swiper 슬라이드마다 구분하고 싶다면

클래스 이름을 바꾸어 주어도 된다.

 

하지만! 여기서 뭔가 아쉽다...

원하는 순번을 클릭하면 해당 슬라이드가 보였으면 좋겠는데

방법이 없을까?

 

역시.. 없는게 없는

 

clickable : true, true를 하면 pagination을 클릭할 수 있게 된다.

 

pagination 모양 종류로는

• 'bullets' : 기본 점 모양, 클릭하여 이동할 수 있음
• 'progressbar' : 기다란 진행바 모양, 클릭 안됨
• 'fraction' : 숫자로 현재 / 전체를 보여줌, 클릭 안됨
• 'custom' : 원하는 모양으로 만들어 사용할 수 있음

 

아직은 디자인에 따라 제약이 생길지도 모르지만

swiper를 사용하기 전과 비교하면

슬라이드 제작하는 시간이 엄청나게 절약되었다.

 

라이브러리도 자유롭게 활용할 수 있게 된다면 얼마나 더 재밌을까