mo49
6/12/2019 - 9:23 AM
00_VueCarouselForNuxt.md
※IEで動かないので使うな！ 使うなら以下のデモページが動くかどうかの確認をしてから！
https://ssense.github.io/vue-carousel/guide/
下記vue-carousel.jsを/pluginsに追加。
このスクリプトを読み込む設定として、 nuxt.config.jsにplugins: [{ src: '~/plugins/vue-carousel', ssr: false }]を追加。
cf. https://qiita.com/gakumac/items/cc3f1bb0dfcbbefa1eeb
:minSwipeDistance="1" は毎回設定するかも。defaultの8は大きすぎる。
代わりにvue-awesome-swiperはエラーなく使えたので良さそう。
https://github.com/surmon-china/vue-awesome-swiper
import Vue from 'vue'
import VueCarousel from 'vue-carousel'
Vue.use(VueCarousel)<template>
<div>
<carousel :minSwipeDistance="1">
<slide>
<div></div>
</slide>
<slide>
<div></div>
</slide>
<slide>
<div></div>
</slide>
</carousel>
</div>
</template>
<script>
import Carousel from 'vue-carousel/src/Carousel.vue';
import Slide from 'vue-carousel/src/Slide.vue';
export default {
components: {
Carousel,
Slide
}
}
</script>