vue-awesome-swiper 的安裝和使用
阿新 • • 發佈:2019-02-03
安裝:最好用: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
},