[Vue] swiper 정리

프로젝트에서 슬라이더 기능으로 swiper를 사용하게 되면서 자주 사용하는 옵션을 정리해 봤습니다. 찾아보니 swiper 2개를  연동 하는 등 사용하는 방법에 따라 다양한 연출이 가능해 보였으나 2개 연동은 아직 사용을 안해봐서 나중에 게시글에 추가 하도록 하겠습니다.

 

사용 예제

vue 코드에서 import 후 슬라이드를 원하는 위치에서 와 태그로 감싸줍니다.

<template>
  <swiper>
    <swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide
    ><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide
    ><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide
    ><swiper-slide>Slide 7</swiper-slide><swiper-slide>Slide 8</swiper-slide
    ><swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
};
</script>

참고 사이트 : https://swiperjs.com/demos

Swiper Demos

 

스와이퍼 기본 팁

기본 클래스 이름을 가급적 유지

스와이퍼에는 기본 클래스가 아닌 다른 이름을 사용할 수 있도록 하는 옵션도 물론 있다. 그러나 스와이퍼에서 제공하는 css 파일은 기본 클래스를 기준으로 하기 때문에 처음 접했을 때 클래스 이름을 바꾸면 제대로 동작하는 걸 확인하기 어렵다. 기본 클래스 그대로 사용하는 것을 추천한다.

pagination, navigation 위치는 자유롭게

클래스 이름을 기준으로 지정하기 때문에 좌우 버튼이나 pagination이 반드시 .swiper내부에 위치할 필요는 없다. 레이아웃에 따라 자유롭게 배치 가능하다.

여러 개의 pagination

bullet과 1/7 형태의 페이지네이션(fraction)은 스와이퍼 내에서 둘 다 페이지네이션으로 동작한다. 둘 다 같이 사용하고 싶다면 둘 중 하나는 커스텀 옵션으로 만들어서 사용해야 한다.

스와이퍼 컨테이너 밖의 슬라이드도 보이게

.swiper가 슬라이더 컨테이너이고 여기를 기준으로 slidesPerView옵션이 동작하지만 .swiper에 overflow:visible 속성을 주면 다른 슬라이드가 보이게 표현 가능하다.

슬라이더 내부에 1개 반이 나오게 하려면?

slidesPerView는 반드시 정수로 끝날 필요는 없다. 소숫점 단위로 작성하면 비율 대로 나온다. 예를 들어 1.5라고 입력하면 슬라이더 1개 반이 나오는 것

 

메서드 사용하기

슬라이더를 조작할 수 있는 기본 메서드 사용법을 알아보자. 마찬가지로 위의 예제에서 해당 부분만 쪼개서 보려고 한다.

// 슬라이더 할당한 swiper로 슬라이더 제어
$(".auto-start").on("click", function() {
    // 기본 설정으로 autoplay 시작
    console.log("autoplay start");
    swiper.autoplay.start();
});

$(".auto-stop").on("click", function() {
    console.log("autoplay stop");
    swiper.autoplay.stop();
});

슬라이더 하단에 위치한 자동 재생 기능으로 버튼을 클릭했을 때 슬라이더 자동재생을 시작하거나 멈출 수 있다.
위의 소스에서 슬라이더를 var swiper 변수에 할당하여 만들었다. 변수로 선언했으니 메서드로 해당 슬라이더를 제어할 수 있다. 스타트 버튼을 누르면 자동 재생이 시작되고, 스탑 버튼을 누르면 멈춘다.

 

옵션 정리

nitialSlide(디폴트 0)

슬라이드의 시작 index번호 지정이 가능(디폴트는 0이다)

direction(디폴트 horizontal)

슬라이드 방향을 정한다.
디폴트는 horizontal(수평)이다.
수직으로 변경할때 vertical을 지정해주면 된다.
수직시에는 height,max-height값을 지정해야한다.

speed(디폴트 300)

슬라이드의 속도 밀리초로 지정
디폴트는 300이다.

autoHeight(디폴트 false)

true을 지정하면 현재 슬라이드 크기에 알맞은 높이로 자동조절 해준다.

efect(디폴트 slide)

슬라이드의 이팩트 효과를 지정한다.
지정가능한 이펙트는 “slide”, “fade”, “cube”, “coverflow” “flip”이다.

spaceBetween(디폴트 0, 사용빈도 높음★★★★★)

슬라이드간의 여백을 px를 지정
요소에 마진을 지정하는경우, 나비게이션이 정상적으로 기동하지 않을 가능성 있음

slidesPerView(디폴트 1, 사용빈도 높음★★★★★)

한번에 보여지는 슬라이드의 숫자를 의미한다.
Number값말고 ‘auto’로도 지정이 가능
loop: true + auto 지정시 loopedSlides를 지정할 필요가 있음.

slidesPerGroup(디폴트 1)

동시에 슬라이드하게 하는 슬라이드의 숫자를 지정

centeredSlides(디폴트 false)

true을 지정하면 액티브한 슬라이드를 중앙에 배치(통상 액티브한 슬라이드는 왼쪽편으로 배치)

loop(디폴트 false)

true로 지정하면 슬라이드를 루프모드로 한다.(슬라이드가 끝나면 처음으로 돌아감)

loopedSlides(디폴트 null)

slidesPerView를 auto로 지정하는 경우, 이 파라메터를 복제한 슬라이드수를 지정

breakpoints(사용빈도 높음★★★★★)

화면 크기마다 다른 파라메터 지정이 가능
레스폰시브한 컴퍼넌트 구현시 필수
breakpoints: { 1024: { slidesPerView: 3, spaceBetween: 40 }, 768: { slidesPerView: 3, spaceBetween: 30 }, 640: { slidesPerView: 2, spaceBetween: 20 }, 320: { slidesPerView: 1, spaceBetween: 10 } }

---

pagination(swiper-pagination, 사용빈도 높음★★★★★)

slide 중간 밑 부분에 위치한다.(아래 그림 참고)

아래와 같이 swiper태그 전에 swiper-pagination를 추가해준다.
...생략 <div class="swiper-pagination"></div> </swiper>
옵션을 아래와 같다. 위에 지정한 클래스와 이름을 맞춰줘야한다.
pagination: { el: ".swiper-pagination", clickable: true },
clickable true를 지정하면 페이지네이션의 아이콘을 클릭한경우 해당한 슬라이드로 표시

swiper-button-prev

이전 슬라이드로 넘기는 버튼
<div class="swiper-button-prev"></div>

swiper-button-next

다음 슬라이드로 넘기는 버튼
<div class="swiper-button-next"></div>

swiper-scrollbar

슬라이드 스크롤바
<div class="swiper-scrollbar"></div>