Memo
vue Nuxtにスワイプ/スライドのアクションを導入する
Home
›
Memo
›
Nuxtにスワイプ/スライドのアクションを導入する
本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
vue-awesome-swiper と swiperを入れる
$ npm install swiper vue-awesome-swiper –save
plugins/vue-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.min.css'
Vue.use(VueAwesomeSwiper)
<div class="p-picture">
<swiper :options="swiperOption">
<swiper-slide v-for="picture in pictures" :key="picture.id">
<img :src="picture.display_url">
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
...
data() {
return {
srcUrl: 'https://image.biccamera.com/img/00000006695796_A01.jpg',
download_url: '',
download_file_name: '',
displayPicture: {},
};
},
[参考]
https://tecb.jp/blog/996
https://swiperjs.com/vue
/
https://web-niar.com/blog/nuxt-js-vue-awesome-swiper
/
関連ページ
v-model
#vue
2020-07-13 19:05:01
コンポーネントの削除
#vue
2020-06-14 18:25:52
Nuxtでmomentを使う
#vue
2020-11-05 17:13:17
Vue(Javascript)で配列をコピーする
#vue
2020-11-06 21:02:45
バインディング
#vue
2020-09-04 12:05:17
Back