Utilisation de base du swiper

Qu'est-ce que le swiper ?

Swiper est un plug-in de graphique carrousel léger qui prend non seulement en charge les PC mais est également conçu pour les appareils mobiles. Vous pouvez l'utiliser pour créer rapidement un graphique carrousel, ou l'étendre pour le rendre plus complexe. .

Utilisation de base

Swiper nécessite deux fichiers, l'un est swiper.css, qui spécifie certains styles couramment utilisés dans ce plug-in de carrousel coulissant. Bien sûr, vous pouvez le définir vous-même si vous le souhaitez. . Style
L'autre est swiper.js, qui est la partie principale du plug-in.
Après avoir introduit ces deux fichiers dans la page, vous devez d'abord écrire la structure HTML de base
Toutes les méthodes d'utilisation suivantes sont basées sur swiper 4.x

  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
      <p class="swiper-slide">Slide 4</p>
      <p class="swiper-slide">Slide 5</p>
      <p class="swiper-slide">Slide 6</p>
      <p class="swiper-slide">Slide 7</p>
      <p class="swiper-slide">Slide 8</p>
      <p class="swiper-slide">Slide 9</p>
      <p class="swiper-slide">Slide 10</p>
    </p>
  </p>

Le nom de la classe est swiper- conteneur, qui est une roue coulissante. Le wrapper du plug-in de lecture est similaire à un masque ou une fenêtre. Le swiper-wrapper est une collection de toutes les images du carrousel disposées dans un certain ordre. à droite Lorsque la souris ou l'écran tactile est utilisé, le swiper-wrapper change C'est la position de cet élément pour obtenir l'effet de carrousel. swiper-slide est chaque élément de l'image du carrousel. Après avoir écrit la structure HTML de base, vous devez initialiser l'image du carrousel

<script>
    var swiper = new Swiper(&#39;.swiper-container&#39;);</script>

Cela générera une image de carrousel par défaut, qui peut être utilisée avec la souris ou l'écran tactile. pour glisser vers la gauche et la droite

Ajouter une pagination et une navigation

La plupart des carrousels ont une pagination et une navigation, qui permettent aux utilisateurs de voir où ils se trouvent actuellement et leur permettent de Sachant qu'il s'agit d'une partie interactive, le La façon d'ajouter une pagination est également très simple. Il vous suffit d'ajouter des options pour spécifier les éléments de pagination lors de l'initialisation
Dans la partie html, ajoutez les boutons suivant et précédent sous swiper-container

    <p class="swiper-container">
        <p class="swiper-wrapper">...</p>
          <p class="swiper-button-next"></p>
          <p class="swiper-button-prev"></p>
    </p>

Ici. swiper-button-next et swiper-button-prev sont tous deux des boutons spécifiés. Le bouton suivant sera centré verticalement et à droite, et le bouton précédent sera centré verticalement et à droite. Bien sûr, il peut également spécifier le vôtre. bouton.

    var swiper = new Swiper('.swiper-container',{
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

Ajouter un élément bouton dans la fonction d'initialisation.
Cela générera un carrousel avec des boutons de navigation

La façon d'ajouter une pagination est très similaire aux boutons de navigation
html :

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分页 -->
    <p class="swiper-pagination"></p>
    <!--导航按钮-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

Ajouter des éléments de pagination lors de l'initialisation
js :

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

De cette façon, vous pouvez générer un carrousel avec pagination et navigation

Boucle et carrousel automatique :

js :
Ajouter

   var swiper = new Swiper('.swiper-container', {       //分页
       pagination: {
           el: '.swiper-pagination',
       },       //导航按钮
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },       //自动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
       },
   });

d'autres attributs communs lors de l'initialisation

1. La pagination est remplacée par une barre de progression

   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',            type: 'progressbar',//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

Cet article explique l'utilisation de base de swiper Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois.

Recommandations associées :

Classe de pagination PHP+MySQL simple

Deux constructeurs de tableaux arborescents sans récursion

Convertissez le HTML en Excel et réalisez des fonctions d'impression et de téléchargement

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!