Grundlegende Verwendung von Swiper (2)

Im vorherigen Abschnitt haben wir eine grundlegende Schiebeseite implementiert, die außer dem Schieben keine Funktionen hatte. Daher werden wir in diesem Abschnitt weitere funktionale Attribute zur Seite hinzufügen.

Implementieren Sie zunächst eine einfache Swiper-Seite entsprechend dem Inhalt der vorherigen Lektion.
Fügen Sie dann Attribute zum initialisierten JS-Code hinzu.

Vergessen Sie natürlich nicht, vorab die heruntergeladene Rahmendatei anzugeben.
Wir fügen zunächst die funktionale Komponente der Seitennavigation hinzu.

Seitennavigation zum externen Container hinzufügen.

<div class="swiper-Container">
<div class="swiper-wrapper">
<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 class="swiper-pagination"></div>  //翻页导航的div
</div>
<script>
var swiper = new Swiper(&#39;.swiper-container&#39;,{
pagination:&#39;.swiper-pagination&#39;,   //绑定翻页导航
paginationClickable:true        //设定可以点击翻页导航进行翻页
});
</script>

Dadurch wird der Seite eine Seitennavigation hinzugefügt.

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