Vue Carousel
公式：Vue Carousel Guide API Examples
【環境】
Vue Carousel: 0.16.0-rc2
Vue.js: 2.9.6
monaca CLI: 3.0.3
OS: Windows10 Pro 64bit
Vue Carousel: 0.16.0-rc2
Vue.js: 2.9.6
monaca CLI: 3.0.3
OS: Windows10 Pro 64bit
インストール
npm install -S vue-carousel
書式
グローバル
グローバルの場合、ではなくて
グローバルで下記のように記述。
main.js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
ローカル
ローカルの場合、ではなくて
利用する .vue ファイルに記述。
Hoge.vue
import { Carousel, Slide } from 'vue-carousel';
export default {
...
components: {
Carousel,
Slide
}
...
};
テンプレート
設定
carousel タグの属性として記述。
公式：API
;（セミコロン）を付けないと、「文字列だぞ！」と怒られる。
スタイル
/* ナビゲーションも含めたカルーセル全体 */
section.VueCarousel {
}
/* スライド全体 */
div.VueCarousel-wrapper {
}
div.VueCarousel-inner {
}
/* スライド個体 */
div.VueCarousel-slide {
}
現在のところ、div.VueCarousel-wrapper と div.VueCarousel-inner が
なぜ親子になっているのか不明。