Grundlegende Verwendung von Swiper

jacklove
Freigeben: 2018-06-11 23:42:14
Original
7258 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Schaltflächenelement zur Initialisierungsfunktion hinzufügen.

Dadurch wird ein Karussell mit Navigationsschaltflächen generiert



Grundlegende Verwendung von SwiperDie Art und Weise, Paginierung hinzuzufügen, ist den Navigationsschaltflächen sehr ähnlich

HTML:


    var swiper = new Swiper(&#39;.swiper-container&#39;,{
        navigation:{
            nextEl: &#39;.swiper-button-next&#39;,
            prevEl: &#39;.swiper-button-prev&#39;,
        }
    });
Nach dem Login kopieren

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>
Nach dem Login kopieren

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


Grundlegende Verwendung von SwiperSchleife und automatisches Karussell:

js:

Fügen Sie

    var swiper = new Swiper(&#39;.swiper-container&#39;, {
      pagination: {
        el: &#39;.swiper-pagination&#39;,
      },
      navigation:{
        nextEl: &#39;.swiper-button-next&#39;,
        prevEl: &#39;.swiper-button-prev&#39;,
      }
    });
Nach dem Login kopieren

während der Initialisierung und andere allgemeine Attribute hinzu

    Paging-Fortschrittsstreifen anstelle von
  1.    var swiper = new Swiper(&#39;.swiper-container&#39;, {       //分页
           pagination: {
               el: &#39;.swiper-pagination&#39;,
           },       //导航按钮
           navigation:{
               nextEl: &#39;.swiper-button-next&#39;,
               prevEl: &#39;.swiper-button-prev&#39;,
           },       //自动轮播
           autoplay: {
               delay: 2500,//时间 毫秒
               disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
           },
       });
    Nach dem Login kopieren
    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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage