Grundlegende Verwendung von Swiper (3)

Implementieren Sie zunächst eine einfache Swiper-Seite entsprechend dem Inhalt der ersten 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. Für uns ist es praktisch, das vertikale Scrollen der Seite und den Navigationsstil beim vertikalen Scrollen zu bestätigen.

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，        //设定可以点击翻页导航进行翻页
direction:&#39;vertical&#39;                //设定页面垂直翻页
});
</script>

Dadurch kann die Seite vertikal scrollen.

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