시작..
이 글에서는 Vue.js 2 버전에서 사용하는 Vueper 라이브러리 사용에 대해서 작성 한다.
<Vueper 공식문서>
1. Install (버전에 맞게 VS CODE 터미널에서 입력하여 설치하면 된다.)
npm i vueperslides # Vue 3.
npm i vueperslides@legacy # Vue 2.2. import (아래와 같이 import 해준 후 component에 등록하면 사용이 가능하게 된다)
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'
...
export default {
components: { VueperSlides, VueperSlide },
...
}3. script (Vueper Slides 스크립트를 포함)
<head>
...
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vueperslides"></script>
<link href="https://unpkg.com/vueperslides/dist/vueperslides.css" rel="stylesheet">
</head>여기까지 왔으면 사용 셋팅은 끝이다.
4. 사용
data에서 slides 객체에 title, content를 가진 배열을 원하는 정보 만큼 값을 입력하거나, BackEnd에서 받은 데이터를 이용해 객체에 담아 받으면 v-for를 사용해 데이터를 출력하여 slide를 만들 수 있다.
<vueper-slides>
<vueper-slide
v-for="(slide, i) in slides"
:key="i"
:title="slide.title"
:content="slide.content">
</vueper-slide>
</vueper-slides>추가
vueper-slides태그 안에 여러 개의 vueper-slide태그를 사용할 수 있으며 vueper-slide태그에 html 코드를 담아서 외부에 버튼이나 구조를 만들 수 있다.
vueper-slides에는 여러개의 설정을 할 수 있는데 공식문서에 예제와 내용이 잘 나와있다. 그 중 내가 사용한 설정을 몇개 설명하면 아래와 같다.
vueper-slides에서 click 이번트를 사용하려면 기존의 vue의 @click가 아닌 @click.native를 사용해야 한다. (이걸 몰라 아까운 시간을 잡아먹음..)
<vueper-slides autoplay
class="no-shadow"
:slideMultiple= skipType
:visible-slides="3"
:slide-ratio="1/4"
:gap="3"
:arrows-outside="true"
:duration= speed
:infinite="true"
:pauseOnTouch="true"
>autoplay : 자동으로 slide가 넘어가도록 하는 속성
slideMultiple : ture = 한번에 보여지는 화면 단위로 화면 넘김, false = 한 장씩 단위로 화면 넘김
visible-slides : 한번에 사진을 몇장 씩 보여줄 꺼냐 라는 속성
arrows-outside : slide 외부에 "<" , ">" 버튼을 만들어 화면이 이동하게 하는 속성 (false면 안보임), inside는 슬라이드 안에 버튼을 만드는 속성이다.
gap : slide에 있는 요소들의 간격 속성, padding으로 이해하면 쉽다.
이러한 옵션들을 이용해 slide를 만들 수 있다.
나는 Back에서 이미지 데이터를 받아와 화면에 출력하는 것을 만들었기 때문에 추가 버튼이나 다른 기능들을 사용하지 않았지만 영상재생이나 외부에 버튼을 만들어 slide를 조작하는 기능도 포함하고 있으니 공식문서를 참고하면 좋을 듯 하다.
다음 내용
다음에 소개할 내용은 Vueper slide에서 사진을 클릭 하면 전체화면으로 사진을 볼 수 있는 v-viewer이라는 라이브러리에 대해 소개 할 것이다.
