일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- JSON
- spring
- java
- MariaDB
- Ajax
- insertAll
- query
- swipe 배너
- checkbox
- vue Carousel
- 정보처리산업기사
- INSERT
- bulkinsert
- egov
- Tomcat
- 마스킹
- 부스트코스
- github
- vue.js
- jdbc
- JQuery
- NoSQL
- mybatis
- jsp
- 구멍가게코딩단
- JAXBContext
- mysql
- vscode tutorial
- 기출문제
- 오라클
- Today
- Total
개발새발
[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
Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue.js
ssense.github.io
github github.com/SSENSE/vue-carousel
SSENSE/vue-carousel
A flexible, responsive, touch-friendly carousel for Vue.js - SSENSE/vue-carousel
github.com
-> github에서 더 많은 옵션들을 볼수있다
'Web Programming > vue.js' 카테고리의 다른 글
[vue.js] Vue 예제 사이트 (0) | 2021.03.05 |
---|---|
[vue.js] 무제한 스크롤 (infiniteHandler) (0) | 2021.02.09 |
[vsCode] vue.js로 만든 todoList (0) | 2021.01.20 |
[Vue CLI] 05. Vue 부모-자식간의 데이터 전달 Props (0) | 2021.01.12 |
[Vue CLI] 04. 컴포넌트의 생성 및 사용 (0) | 2021.01.12 |