vue2.0에서 swiper 구성 요소를 사용하여 캐러셀 구현(자세한 튜토리얼)

이제 vue2.0을 사용하여 swiper 컴포넌트를 사용하여 캐러셀을 구현하는 예제 코드를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. swiper를 설치합니다

npm install swiper@3.4.1 --save-dev

2. 참조 구성 요소

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

3. 구성 요소를 초기화합니다. 매개변수 설정

 <p class="swiper-container" id="swiper">
  <p class="swiper-wrapper">
   <p class="swiper-slide" v-for="(item,$index) in detail.imgs">
   <a v-on:click="showPreview($index,detail.imgs,swiperObj)">
    <figure class="wp-avatar banner">
    <img v-cloak :src="item | toQiNiuImg"/>
    </figure>
   </a>
   </p>
  </p>
  <!-- Add Pagination -->
  <p class="swiper-pagination"></p>
  </p>

5. 완료, 알았어

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

Vuex 프로젝트 구조 디렉터리 및 몇 가지 간단한 구성 소개

숫자 유형 배열에서 가장 큰 요소를 찾는 JS 방법

vue2.0 자산 파일과 정적 파일의 차이점에 대한 자세한 설명 리소스 파일

위 내용은 vue2.0에서 swiper 구성 요소를 사용하여 캐러셀 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!