[vue] swiper

vue-awesome-swiper란?

Swiper라는 인기 라이브러리를 vue에서 간단히 사용할 수 있게 만들어진 wrapper입니다.

swiper 설치방법

현재 Swiper 최신버전인 6은 Vue3에 최적화되어 있기 때문에 Vue2.x 버전에서 사용할 수 있는 Swiper 5.4.5를 사용합니다.

npm install swiper@5.4.5
npm install swiper vue-awesome-swiper@4.1.1

swiper 로드

사용하고자 하는 vue page에서 아래 부분을 추가해주기만 하면 준비 끝!

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
	name: "slider",
	components:	{
       Swiper,
       SwiperSlide
	},
}

swiper 간단한 코드

<swiper
    class="swiper"
    :options="swiperOption"
>
    <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>
    <div
        class="swiper-pagination"
        slot="pagination"
        >
    </div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>

swiperOption: { 
    slidesPerView: 1, 
    spaceBetween: 30, 
    loop: true, 
    pagination: { 
        el: '.swiper-pagination', 
        clickable: true 
    }, 
    navigation: { 
        nextEl: '.swiper-button-next', 
        prevEl: '.swiper-button-prev' 
    } 
},

swiper 옵션

• initalSlide
  디폴트 0
  슬라이드의 시작 Index번호 지정이 가능

• direction
  디폴트 horizontal
  슬라이드 방향 지정
  horizontal(수평), vertical(수직)
  vertical인 경우 height 값을 지정해야 함

• speed
  디폴트 300
  슬라이드의 속도 밀리초

• autoHeight
  디폴트 false
  true로 지정할 경우 알맞은 높이로 자동조절

• effect
  디폴트 slide
  슬라이드의 효과
  slide, fade, cube, coverflow, flip

• spaceBetween 🌟
  디폴트 0
  슬라이드 간의 여백 px
  요소에 마진을 지정하는 경우, 내비게이션이 정상적으로 기동하지 않을 가능성이 있다.

• slidesPerView 🌟
  디폴트 1
  한번에 보여지는 슬라이드는 갯수
  Number 값 말고 'auto'로도 지정 가능

• slidesPerGroup
  디폴트 1
  동시에 슬라이드 하게 하는 슬라이드의 숫자를 지정

• centeredSlides 🌟
  디폴트 false
  false, true
  true로 지정하면 활성화 된 슬라이드를 중앙에 배치

• loop 🌟
  디폴트 false
  false, true
  슬라이드 무한루프모드

• loopedSlides
  디폴트 null
  sliderPerView를 auto 로 지정하는 경우, 복제한 슬라이드 수를 지정

• breakpoints 🌟
  화면 크기마다 다른 파라메터 지정
  response 컴퍼넌트 구현 시 필수

• pagination 🌟
  디폴트 bullets
  슬라이드의 페이지
  bullets, dynamic, progress, fraction, custom

• freemode
  디폴트 false
  슬라이드하면서 넘길때 스크롤로 방향 지정
  false, true

---

🌱 참고 Swiper Demo
🥕 코드 github - 코드