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 .
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('.swiper-container');</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
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 generiertDie 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', } });
<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>
Schleife und automatisches Karussell:
var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
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 }, });
Verwandte Empfehlungen:
Einfache PHP+MySQL-Paging-KlasseZwei Baumarray-Konstruktoren ohne RekursionHTML in Excel konvertieren und Druck- und Downloadfunktionen nutzenDas obige ist der detaillierte Inhalt vonGrundlegende Verwendung von Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!