vue2.0 utilise swiper pour implémenter des publicités carrousel

Cette fois, je vais vous présenter vue2.0 pour utiliser swiper pour implémenter des publicités carrousel. Quelles sont les précautions pour que vue2.0 utilise swiper pour implémenter des publicités carrousel. jetez un oeil.

1. Installer le composant swiper

npm install swiper@3.4.1 --save-dev

2.

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

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

5 Terminé, ok

Je crois que vous maîtrisez la méthode après avoir lu. C'est le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

L'application côté Web implémente l'actualisation de force arrière

Explication graphique et textuelle détaillée de Vue.directive ()

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!