Etc

[Swiper js]스와이퍼 js 사이트에서 슬라이더 받아쓰는 법

꼬드리 2022. 10. 5. 23:23

제목처럼 오늘 해본 것은 제법 간단하다. 바로 슬라이더 넣기!

슬라이더가 뭐냐면 사진이 여러 장 있을 때 옆으로 스르륵 넘기면서 볼 수 있게 하는 그거다. 바로 그거.

 

Swiper js https://swiperjs.com/는 라이브러리로, 누군가 고맙게 미리 짜둔 코드를 우리가 가져다가 슬라이더로 쓸 수 있는 곳이다. 물론 유료 슬라이더들도 있지만 기본적인 형태의 슬라이더를 무료로 유용하게 제공한다. 이걸 직접 js로 다 짤 수도 있겠으나 그러면 그거 갖고 네■버에(ㅋㅋ)취직해도 된다고 하더라... 하여튼. 만들기까진 세월아, 네월아 걸리는 시간을 단축시켜주는! 고마운 슬라이더를 적용하는 법을 한번 정리해보겠다.

 

1. 먼저 홈페이지에 회원가입을 하고 나서 Get Started를 클릭한다.(사실 여기에 영어로 어떻게 하면 되는지 다 설명되어 있으니 영어를 잘 한다면 이거만 읽어도 될 것 같다. 시작 설명서다.)

 

2. 왼쪽 목록에서 Download assets를 클릭, 스크롤바만 쬐금 위로 올리면 

이렇게 생긴 부분이 나온다. 파란 주소를 클릭하면 CDN파일들이 정렬되어 제공되는 곳이 나온다. 여기서 Show all을 눌러 목록 전체를 펼친다. 굉장히 길어 보여서 어지럽겠지만 사실 우리가 당장 필요한 파일은 css와 js 두 가지뿐이다!

나는 이중에서  /npm/swiper@8.4.2/swiper-bundle.css 와  /npm/swiper@8.4.2/swiper-bundle.min.js를 받아다 썼는데, 뒤에거는 min.js파일(그냥 js보다 용량이 조금 더 작다)로 그냥 js를 받아 써도 무방하다. css도 min.css 받아써도 된다.

 

받아다 쓰는 방법!!! 각각 클릭하면 흰 바탕에 코드가 엄청 빼곡한 창이 뜬다. 여기서 ctrl+s 눌러 바로 필요한 폴더로 저장하면 된다. 양식은 각각 파일명 그대로 .css / min.js 이렇게. ... 나는 프로젝트 안에 각각 css js 폴더를 따로 만들어뒀기 때문에 그곳으로 하나씩 넣어줬다.

 

3. 방금 폴더에 저장한 각각의 파일과, 슬라이더가 들어가게 될 프로젝트의 html 기본 파일을 연결해준다. 연결하는 법은 간단한데, css파일은 기타 css파일을 연결하듯 head 내에 <link rel>로 위치 지정하면 되고, min.js파일도 <script src>로 위치 지정해서 연결하면 된다. 명심할 것. 두 가지 파일이 반드시 다 연결되어 있어야 슬라이드가 제대로 작동한다!!!

 

4. 이제 슬라이더가 들어갈 구간의 width나 height를 정해준다. 아마도, 슬라이더를 적용하기 전에 html에 이미지가 여러 장 있을 것이다. 그럼 따로 안 정해줘도 되고... 하여튼 크기를 정해두지 않으면 사이즈가 없어서 슬라이더가 나오지 않는다.

 

5. get started 창 맨 마지막에 있는 js코드를 싹 다 복사해서 기존의 html 문서 맨 아래, 그니까  /body태그 바깥 /html 전에 <script></script>사이 쏙 넣어준다. 이 중 쓰고 싶은 기능만 쓰면 된다. 나는 기본 슬라이드부터 넣기 위해 필요한 걸 제외하고 다 지워봤다.

nevigation은 슬라이더 사진을 움직일 버튼에 적용하고 싶어서 놔뒀다. 

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  loop: true,
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

 

6. Get Started 옆의 API를 클릭한다. 이제 진짜 본격적으로 슬라이더 세팅 가능하다. 슬라이더가 적용될 부분의 부모에 클래스명을 지정하고(뭐든 ok) 그 아래에 반드시 "swiper-wrapper"클래스명을 준 뒤, 하위 요소(아마도 이미지)에 각각 "swiper-slide"라고 이름을 줘야한다.

 

마지막으로 아까 위에서 <script>사이 넣어둔 코드에서 '.swiper'을 해당 부모 클래스명으로 바꿔준다. 

그러면 마참내 슬라이더가 뜰 것이다. 따단!

 

 

API는 읽고 원하는만큼 매만지면 된다. 가령 위에 direction은 vertical로 되어있는데, 이건 사진이 위아래 수직으로 움직인다는 것이다. 설명서대로 horizontal로 바꾸면 옆으로 움직인다. loop:true는 첫 사진과 마지막 사진이 루프처럼 연동되어서 처음과 끝이 없다는 것인데 지워주거나 false로 바꾸면 루프 효과가 사라진다. effect:fade; 같이 기존에 slide로 디폴트 된 넘어가는 효과를 서서히 흐려지게 바꿀 수도 있고...

 

예시를 들어, Api 사이트에서 Pagination을 넣는다고 해보자. 왼쪽 메뉴에서 해당 항목을 클릭, 우측에 까만 코드박스가 뜨면 그 곳에서 필요한 부분만 솎아낸다. 지금 경우에는 

pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },

이거를 <script>에 아까 넣어둔 코드 사이 끼워넣으면 될 것 같다. 물론 pagination을 넣을 부분에 div 넣고 여기 클래스명을 줘서 el: 뒤에 오는 주소도 그 클래스명으로 바꿔야 하지만.....(추가로 css에서 크기 조정이나 위치 조정이 좀더 필요하다.)

말로 설명하기가 쉽지 않네. 하여튼 그러면 페이지가 어디에 있는지 표시하는 기능이 추가된다! 

 

또 자동으로 넘어가게 한다던가.. 스크롤 바를 만든다던가... 추가로 여러 기능을 더하고 싶다면 위쪽에 API를 클릭해서 거기서 이거저거 추가할 수 있다.

 

뭐든, API를 읽는 버릇을 들일 것. 구체적인 설명서나 다름없으니까. 

 

  • 하여튼 남이 만든 거나 슬라이더 쓸 때는 못생겼다고 해서 class명을 되도록 바꾸지 않는 걸 추천한다. 사유... 해보면 암. 작동이 안 됨...... 미리 정해둔 약속임....