vue2.0은 스와이프를 사용하여 캐러셀 광고를 구현합니다.

이번에는 vue2.0에서 캐러셀 광고를 구현하기 위해 스와이퍼를 사용하는 주의 사항을 알려드리겠습니다. 다음은 실제 사례입니다.

1. swiper

npm install swiper@3.4.1 --save-dev

2. ReferenceComponent

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

3. 4 , 구성요소 초기화 및 매개변수 설정

 <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. 완료했습니다. ok

이 기사의 사례를 읽으신 후 방법을 숙지하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요! 추천 자료:

백포스 새로 고침을 구현하는 웹 측 애플리케이션

Vue.directive() 자세한 그래픽 및 텍스트 설명

위 내용은 vue2.0은 스와이프를 사용하여 캐러셀 광고를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!