vue-awesome-swiper 的安装和使用
安装:最好用:cnpm install vue-awesome-swiper --save。用npm太慢会卡死。引用:/*全局引入*/import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。...
·
安装:最好用:cnpm install vue-awesome-swiper --save。用npm太慢会卡死。
引用:
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
/*组件方式引用*/
import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式,以及具体位置。
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
使用:
<swiper :options="swiperOption">
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
data() {
return {
swiperOption: {
notNextTick: true,
autoplay: true,
speed: 1000,
loop: true
},
};
},
components: {
swiper,
swiperSlide
},
参考网址: https://segmentfault.com/a/1190000014609379#articleHeader0
更多推荐
已为社区贡献2条内容
所有评论(0)