关于新版 swiper,vue-awesome-swiper
题目
- 为何我的swiper,vue-awesome-swiper组件pagination小圆点不显现题目?
- 为何我的swiper不会自动播放?
- 为何我的swiper没有css?
运用
引入(前面的步骤和平常一样)
npm install vue-awesome-swiper --save
- 在 main,js 里引入(全局):
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 不显现,图片不轮播。
失足前:
纠正后:
总结
- vue-awesome-swiper官网实在早放出申明来了,但本身一看满是英文,就没想看下去。厥后发实在很轻易看晓得,吸取教训本身多去看看文档,不要找 demo 去抄。
- 照样少依托插件,有些插件随时更新,等有才能,本身造!
弄到晚上12点,才弄邃晓本来 Swiper 版本区分了组件和一般版本,不能看照本来的履历写了。
发明网上关于最新 vue-awesome-swiper就两三篇,而且没说清晰。因而写下这篇,愿望对人人有协助。