npm install vue-awesome-swiper --save
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'
(css 不显示的问题可能就在这)组件里引入:
import 'swiper/dist/css/swiper.css' //在全局没引入,这里记得要!import { swiper, swiperSlide } from 'vue-awesome-swiper'export default { components: { swiper, swiperSlide }}
template:
<swiper :options="swiperOption"><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> </swiper>
script:
export default {data() { return { swiperOption: { // 所有的参数同 swiper 官方 api 参数一样 // } }},... }
重点在于 swiperOption 里面的变化,区别看下图:
原来 pagination 和 autoplay 要这样配置!
我原来就是在这两处错了,导致 pagination 不显示,图片不轮播。
出错前:
纠正后:
联系客服