Heim >Web-Frontend >HTML-Tutorial >Grundlegende Verwendung von Swiper (3)

Grundlegende Verwendung von Swiper (3)

黄舟
黄舟Original
2017-01-20 15:11:321305Durchsuche

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)!


Stellungnahme:
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