[vue.js] vue Carousel을 이용한 swipe 배너

 

npm 설치

npm install vue-carousel

 

---

 

vue component에 vue-carousel import 후 사용

 

- Global로 import 할 경우

 

import Vue from 'vue';

import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

---

- Local로 import 할 경우

 

import { Carousel, Slide } from 'vue-carousel';

 

export default {

     ...

     components: {

       Carousel

       , Slide

      }

       ...

};

 

---

 

<carousel v-model=index :per-page="1" class="banner_list" 
                        paginationActiveColor="#e01a31"  -- 보이는 이미지 버튼 색 변경
                        paginationColor="#999"              -- 기본 버튼 색 변경
                        :paginationPadding=3>               -- 버튼 간격 조절
                        <slide v-for="banner of banners" :key="banner.seq" class="slide_item" >
                            <img :src=banner.filePath style="height:100px; width:100%;" @click="moveUrl(banner.linkUrl)">
                        </slide>
                    </carousel>

 

 

 

 

 

 

[참고사이트]

 

Live Demo ssense.github.io/vue-carousel/

Vue Carousel

github github.com/SSENSE/vue-carousel

SSENSE/vue-carousel

-> github에서 더 많은 옵션들을 볼수있다