vue 를 이용해 핸드폰에서도 이용가능한 반응형 웹을 만들 때, 이미지 슬라이더를 구현해야 할 때가 있으실 겁니다. 스와이프를 통해 여러 이미지를 리스트 형식으로 보여주는 기능을 구현하기 위해 vue-tiny-slider 모듈을 사용해보았습니다. 아래는 데모입니다.
위의 데모는 3개의 이미지를 슬라이더로 만들어 보여주는 예제입니다. 그럼 자세한 사용방법에 대해 알아볼까요?
사용하기 전 준비
vue-tiny-slider 를 사용하기 전 모듈을 먼저 설치해야 합니다. 저는 npm 을 주로 사용하기 때문에 npm 을 이용해서 모듈을 설치하도록 하겠습니다.
$npm i vue-tiny-slider --save
// --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다.
모듈을 설치하면 위처럼 package.json 파일에 vue-tiny-slider 가 추가되었을 것입니다. 이제 코드에서 사용해볼까요?
코드 사용법
<template>
<div id="test">
<tiny-slider :mouse-drag="true" :loop="false" :autoplay= "false" items="1" gutter="20" speed="1000" id="my-slider">
<div style="height: 300px; background: red">첫번쨰</div>
<div style="height: 300px; background: yellow">두번쨰</div>
<div style="height: 300px; background: green">세번쨰</div>
</tiny-slider>
</div>
</template>
<script>
import VueTinySlider from 'vue-tiny-slider';
export default {
components: {
'tiny-slider': VueTinySlider
}
}
</script>
위는 정말 간단한 vue 파일 예제입니다. 우선 vue-tiny-slider 모듈을 임포트한 후 뷰 객체의 컴포넌트로 추가해줍니다.
components: { 'tiny-slider' : VueTinySlider }
components 에 컴포넌트를 기록하면 위의 template 내에서 tiny-slider 태그는 VueTinySlider 를 적용할 것이라고 명시하는 것입니다.
이렇게 컴포넌트를 추가하신 후 위의 예제처럼 template 에 슬라이더를 추가해줍니다. 더 많은 옵션값이 궁금하시면 하단에 참고 사이트에서 알아보시면 될 거 같습니다! 저는 기본적이고 조작해야 할 필요가 있는 옵션들을 사용해보았습니다.
- mouse-drag : 말 그대로 마우스로 드래그하는 것을 허용하는지를 나타냅니다.
- autoplay : 사용자가 직접 스와이프하지 않아도 자동으로 스와이프가 되도록 할 것인지를 나타냅니다.
- loop : 균일한 속도로 무한으로 스와이프 시킬 것인지를 나타냅니다.
- items : 보여지는 공간에 아이템이 몇개가 보여지게 할 것인지를 나타냅니다. 저는 1로 설정을 했으므로 div 태그가 슬라이드 당 하나씩 보여지게 됩니다.
- gutter : item 사이의 간격을 나타냅니다. margin 과 같은 존재입니다.
- speed : 스와이프되는 속도를 나타내며 기본은 300으로 ms 단위입니다.
- nav 와 관련된 옵션들 : 위쪽에 prev 와 next 버튼을 보이지 않게 하고 싶을 때 이용하는 옵션입니다. 하단의 참고 사이트를 참고해주세요.
동적 데이터를 이용한 슬라이더 구현
원하시는 옵션을 자유롭게 사용하시면 될 것 같아요! 이제 제가 하려는 것은 위와 같은 정적 데이터를 가지고 만드는 슬라이더가 아니라, 서버에서 데이터를 가져와 슬라이더에 아이템을 추가하는 것과 같은 동적 데이터를 이용한 슬라이더 구현입니다. 저도 처음에 제 마음대로 되지 않아 많이 고생했는데 그 이유를 알아냈습니다.
우선 mounted 생명주기에서 서버에게 요청해 이미지 url 을 가져오는 코드를 구현한 예제입니다.
data: function () {
return {
urls: null
}
},
components: {
'tiny-slider': VueTinySlider
},
mounted: function () {
let self = this;
axios.get("server_url").then(res => {
switch (res.data.message) {
case "success":
self.urls = res.data.result.urls.slice();
break;
}
}).catch(err => {
console.log("서버와의 통신을 실패했습니다. 다시 시도해주세요.", err.message);
});
},
data 에 urls 을 추가하고 서버와 통신이 끝난 후 서버가 넘겨준 url 배열을 복사해 저장합니다. 이제 제가 하고 싶은 일은 urls 배열에 들어있는 url 을 이용해 이미지 슬라이더를 구현하는 것입니다. 아래의 코드는 vue 의 v-for 을 이용해 구현한 코드입니다.
<tiny-slider :mouse-drag="true" :loop="false" :autoplay= "false" items="1" gutter="20" speed="1000" id="my-slider">
<div v-for="url in urls"><img :src="url" style="max-width: 100%; max-height: 200px"></div>
</tiny-slider>
이렇게 구현하시면 분명히 제대로 작동하지 않을 겁니다. 그 이유는 mounted 에서 서버와 통신하기 이전에 tiny-slider 는 화면에 붙기 때문에 이미 생성되었고, 이후에 urls 배열이 바뀌기 때문입니다. 그 때문에 제대로 작동하지 않아서 저도 엄청 고생했습니다T^T..
그래서 찾은 방법은, v-if 를 이용해 한번 더 감싸는 것이었습니다. v-if 는 조건문이 true 가 아니면 dom 을 화면에 그리지도 않습니다. 따라서 v-if 안에 배열에 값이 할당되었는지를 확인하고 할당되지 않았으면 화면에 그리지를 않아 미리 그려지는 현상을 방지할 수 있었습니다. 이해 가시나요? 아래는 수정된 코드입니다.
<tiny-slider :mouse-drag="true" :loop="false" :autoplay= "false" items="1" gutter="20" speed="1000" id="my-slider" v-if="urls">
<div v-for="url in urls"><img :src="url" style="max-width: 100%; max-height: 200px"></div>
</tiny-slider>
이렇게 tiny-slider 컴포넌트 자체에 v-if 를 추가하시면 됩니다! 여러분만의 슬라이더를 구현해보세요! :)
참고 : npm 사이트
