Die Verwendung von Swiper (1)

Swiper ist ein mobiles Seitenschiebe-Framework. Wir können dieses Framework verwenden, um unseren eigenen Lebenslauf zu schreiben.

Neben dem Schieben von Seiten stellt Swiper auch eine Vielzahl weiterer Funktionskomponenten zur Verfügung, die wir nutzen können.

und Methoden und Callback-Funktionen.

Wir implementieren zunächst eine einfache Swiper-Seite, eine Seite nur mit Umblätterfunktion.

Zuerst müssen wir auf die Framework-Datei verweisen. swiper.css und swiper.js

<link rel="stylesheet" href="swiper.css">
<script src="swiper.js"></script>

Erstellen Sie einen externen Container. swiper-cotainer

<div class="swiper-container">

fügt dann einen inneren Container innerhalb des äußeren Containers hinzu. swiper-wrapper

<div class="swiper-wrapper">

Fügen Sie jede umblätterbare Seite im inneren Container hinzu

<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
</div>
</div>

Dann initialisieren Sie in js

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

Das Obige ist der Inhalt der Verwendung von Swiper (1). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). ) !