vue2.0 verwendet Swiper, um Karussellanzeigen zu implementieren

Dieses Mal werde ich Ihnen zeigen, wie Sie Swiper zum Implementieren von Karussellanzeigen verwenden ein Blick.

1. Swiper installieren

npm install swiper@3.4.1 --save-dev

2. Komponente zitieren

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

3. HTML-Seitencode

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

4. und Parameter einstellen

 setTimeout(function () {
  state.swiperObj = new Swiper('#swiper', {
  loop: true,
  pagination: '.swiper-pagination',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

Fertig, ok

Ich glaube, dass Sie die Methode nach dem Lesen beherrschen Dies ist in diesem Artikel der Fall. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Webseitige Anwendung implementiert Back-Force-Aktualisierung

Detaillierte Grafik- und Texterklärung der Vue.directive ()

Das obige ist der detaillierte Inhalt vonvue2.0 verwendet Swiper, um Karussellanzeigen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!