vue中如何寫輪播圖
阿新 • • 發佈:2019-01-05
步驟:
1. 安裝vue-awesome-swiper
npm install vue-awesome-swiper -S
2.在vue專案中引用vue-awesome-swiper
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
某一個vue元件檔案中:
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
3 、 .vue檔案中的的html
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
4、.vue檔案的script標籤中的內容
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的引數同 swiper 官方 api 引數
// ...
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
}
}
</script>