[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/
github github.com/SSENSE/vue-carousel
-> github에서 더 많은 옵션들을 볼수있다