VUE는 올바른 방법으로 프로 테스트 컷도 네트워크 swiper 추가 ---

VUE 프로젝트에서, 우리는 다른 이미지의 회전 목마와 기존의 절단 계획, 기존의 컷 그림을하고 우리는 일반적으로 (전체에 매우 강력한 swiper을 사용하고, 일반적으로 완료하는 데 VUE VUE - 최고 - swiper 구성 요소를 따라 vue- 멋진-swiper 실제로 VUE 플러그 swiper4 패키지를 기반으로 당신이 swiper.js 플러그 인으로, 당신은 기본적으로 느린 연결됩니다) 익숙 할 일이 너무 경우. 프로 테스트 유용한 다음과 같이 다음과 같은 방법을 성공적으로 수행 할 수 있습니다 :

 

(1), 명령 라인을 통해 장착 조립체

npm install swiper

2 추가 main.js

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

3, 현재 페이지를 추가

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

도 4에서, 현재 페이지 데이터를 추가 안쪽

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, 현재 페이지를 추가

<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>