Implémenter le carrousel à l'aide du composant swiper dans vue2.0 (tutoriel détaillé)

Ci-dessous, je vais partager avec vous un exemple de code pour utiliser vue2.0 pour implémenter un carrousel à l'aide du composant swiper. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Installer le 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. 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. Terminé, ok

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. à l'avenir.

Articles associés :

Introduction au répertoire de structure du projet vuex et quelques configurations simples

Méthode JS pour trouver le plus grand élément dans un Tableau de types de nombres

Explication détaillée de la différence entre les actifs et les fichiers de ressources statiques dans vue2.0

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!