vue-tiny-slider (슬라이더)모듈 사용하기

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 안에 배열에 값이 할당되었는지를 확인하고 할당되지 않았으면 화면에 그리지를 않아 미리 그려지는 현상을 방지할 수 있었습니다. 이해 가시나요? 아래는 수정된 코드입니다.

 

(created에 넣으면 url 배열이 바뀌는 걱정 안해도 되지않을까요? 아무튼... )

 

<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 사이트