Utilisez le composant swiper pour obtenir des effets publicitaires carrousel

Cette fois, je vais vous apporter le composant swiper pour obtenir l'effet de la publicité carrousel. Quelles sont les précautions pour utiliser le composant swiper pour obtenir l'effet de carrousel. publicité. Ce qui suit est la pratique réelle.

1. Installer swiper

npm install swiper@3.4.1 --save-dev

2. CitationComposant

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

3. Code de la page HTML

 <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. Initialiser les composants et définir les paramètres

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

5. C'est fait, ok

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

La différence entre @HostBinding() et @HostListener() dans AngularJS
axios envoie une demande de publication et springMVC ne peut pas accepter les paramètres ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!