Nutzen Sie die Swiper-Komponente, um Karussell-Werbeeffekte zu erzielen

Dieses Mal werde ich Ihnen die Swiper-Komponente vorstellen, um den Effekt von Karussellwerbung zu erzielen. Welche Vorsichtsmaßnahmen gibt es für die Verwendung der Swiper-Komponente, um den Effekt von Karussellwerbung zu erzielen? Das Folgende ist die tatsächliche Praxis.

1. Swiper installieren

npm install swiper@3.4.1 --save-dev

2. ZitatKomponente

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. Komponenten initialisieren und Parameter einstellen

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

Fertig, ok

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Der Unterschied zwischen @HostBinding() und @HostListener() in AngularJS
Axios sendet eine Post-Anfrage und SpringMVC kann keine Parameter akzeptieren.

Das obige ist der detaillierte Inhalt vonNutzen Sie die Swiper-Komponente, um Karussell-Werbeeffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!