vue-awesome-swiperを使ってカルーセル風UIを作ってみた
https://github.surmon.me/vue-awesome-swiper/
https://swiperjs.com/swiper-api
https://www.kabanoki.net/4783/
https://mykii.blog/nuxt-vue-awesome-swiper/
https://webrandum.net/js-library-swiper/
globalに定義する
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
Vueコンポーネントに定義する
slide.js
実践例
TypeScript で vue-property-decorator を使ってコンポーネントを作成
https://github.com/surmon-china/vue-awesome-swiper/issues/680
import Vue from 'vue'
import { Swiper as SwiperClass, Pagination, Navigation } from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
// import style
import 'swiper/swiper-bundle.min.css'
SwiperClass.use([Pagination, Navigation])
Vue.use(getAwesomeSwiper(SwiperClass))