Grundlegende Verwendung von Swiper

Was ist Swiper?

Swiper ist ein leichtes Karussell-Diagramm-Plug-in, das nicht nur den PC unterstützt, sondern auch für mobile Geräte konzipiert ist. Sie können es verwenden, um schnell ein Karussell-Diagramm zu erstellen oder es zu erweitern, um es komplexer zu machen .

Grundlegende Verwendung

Swiper erfordert zwei Dateien, eine ist swiper.css, die einige häufig verwendete Stile in diesem Schiebekarussell-Plug-in angibt. Natürlich können Sie sie selbst definieren, wenn Sie möchten . Style
Der andere ist swiper.js, der Hauptteil des Plug-Ins.
Nachdem Sie diese beiden Dateien in die Seite eingefügt haben, müssen Sie zunächst die grundlegende HTML-Struktur schreiben
Alle folgenden Verwendungsmethoden basieren auf 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>

Der Klassenname lautet Swiper-Container. Das ist ein verschiebbares Karussell-Plugin. Der Wrapper ähnelt einer Maske oder einem Fenster. Der Swiper-Wrapper ist eine Sammlung aller Karussellbilder, die standardmäßig nach links und rechts angeordnet sind Wird der Touchscreen bedient, ändert sich die Position dieses Elements, wodurch der Effekt eines Karussells erzielt wird. Swiper-Slide ist jedes Karussellelement. Nachdem Sie die grundlegende HTML-Struktur geschrieben haben, müssen Sie das Karussell

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

initialisieren, damit ein Standardkarussell generiert werden kann. Sie können die Maus verwenden oder den Bildschirm berühren, um nach links zu schieben rechts

Page und Navigation hinzufügen

Die meisten Karussells verfügen über Paginierung und Navigation, die es Benutzern ermöglichen, zu sehen, wo sie sich gerade befinden, und ihnen mitzuteilen, wo sie sich befinden Das Hinzufügen von Paging ist ebenfalls sehr einfach. Sie müssen nur Optionen hinzufügen, um die Paging-Elemente während der Initialisierung anzugeben.
Fügen Sie im HTML-Teil die Schaltflächen „Weiter“ und „Zurück“ unter „Swiper-Container“ hinzu. next und swiper-button-prev sind beide designierte Schaltflächen. Die Schaltfläche next wird vertikal zentriert und rechts angezeigt, und die Schaltfläche previous wird vertikal zentriert rechts angezeigt.

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

Schaltflächenelement zur Initialisierungsfunktion hinzufügen.

Dadurch wird ein Karussell mit Navigationsschaltflächen generiert

Die Art und Weise, Paginierung hinzuzufügen, ist den Navigationsschaltflächen sehr ähnlich

HTML:

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

Paging-Elemente während der Initialisierung hinzufügen

js:

  <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>

Auf diese Weise können Sie ein Karussell mit Paging und Navigation generieren

Schleife und automatisches Karussell:

js:

Fügen Sie

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

während der Initialisierung und andere allgemeine Attribute hinzu

Paging-Fortschrittsstreifen anstelle von

1.    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 
          },
      });

In diesem Artikel wird die grundlegende Verwendung von Swiper erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einfache PHP+MySQL-Paging-Klasse

Zwei Baumarray-Konstruktoren ohne Rekursion

HTML in Excel konvertieren und Druck- und Downloadfunktionen nutzen

Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung von Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!