Heim >Web-Frontend >js-Tutorial >Nutzen Sie die Swiper-Komponente, um Karussell-Werbeeffekte zu erzielen

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-12 13:37:572267Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn