vue added swiper right way pro-test cut FIG Network ---

In vue project, we are doing different image carousel and traditional cutting plans, traditional cut figure we generally use very powerful swiper to complete, and in general depend vue vue-awesome-swiper components to complete ( vue- awesome-swiper is actually based vue plug swiper4 package , so if you happen to be familiar with swiper.js plug-in, then you are basically slow connection). Useful pro-test, the following method can successfully performed, as follows:

 

1, the mounting assembly through the command line

npm install swiper

2, adding main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper) 

3, add the current page

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'; 

4, add the current page data inside

swiperOption: {
pagination: {
el: '.swiper-pagination', clickable :true }, paginationClickable: true, autoplay: 2500, autoplayDisableOnInteraction: false, loop: false, coverflow: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows : true } }, 

5, add the current page

<swiper class="h-view" :options="swiperOption"> <swiper-slide v-for="(item,index) in bigPic" v-if="index<4 "> <router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}"> <div class="img"> <img :src="item.bigImgUrl ? item.bigImgUrl : 'imgs/img01.jpg'"/> </div> </router-link> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>