1.安装
npm install vue-awesome-swiper --save
2.全局配置：
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.组件内的局部配置：
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
实例数据的假的或者死的：
<template>
<div class="shopcar">
shopcar
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>css
</swiper>
<Nav />
</div>
</template>vue
<script>
import Nav from '../Nav'
export default {
name: "ShopCar",
components:{
Nav
},
data() {
return {
swiperOption:{
autoplay:true,
delay:2000
}
}
}
}
</script>npm
<style lang="css" scoped>
</style>async
4.动态
实例：
<template>
<swiper :options="swiperOption"> <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> export default { name: 'carrousel', data() { return { swiperOption: { pagination: { el: '.swiper-pagination' } }, swiperSlides: [1, 2, 3, 4, 5] } }, mounted() { setInterval(() => { console.log('simulate async data') if (this.swiperSlides.length < 10) { this.swiperSlides.push(this.swiperSlides.length + 1) } }, 3000) } } </script>